动态路由理解

一、通过配置动态路由进行页面跳转同时进行参数传递

1、配置路由

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

let routes = [
        {
            path:"",
            redirect: "/home"
        },
        {
            path:"/home",
            name:"Home",
            component:() => import("@/pages/home/Index")
        },
        {
            path:"/me/:data",       // ---->配置路由参数，注意是配置到跳转目的地，不是跳转源头
            name:"Me",
            component:() => import("@/pages/me/Me")
        }
    ]

export default new Router({
    routes
})

2、跳转设置 ----------》注意这种方式需要在路由里进行参数设置，用于接收方获取具体的值

image.png

3、数据接收

在跳转目的地进行接收  this.$route.params.data  
    // ----> 注意接收方的 data 参数要与路由配置处的参数保持一致，否则获取不到参数值

二、通过 router-link 进行参数传递

image.png