vue动态获取路由

1.router-->index.js中，定义参数名

import Home from '../components/home'
import About from '../components/about'
// 配置路由和组件之间的应用关系
const routes = [
　　// 初次加载重定向到首页
　　{
　　　　path:'',
　　　　redirect:Home
　　},
　　{
　　　　path:'/home/:userId',
　　　　component:Home
　　},
　　{
　　　　path:'/about',
　　　　component:About
　　}
]
const router = new VueRouter({
    routes
})

 

2.app.vue中，传参

<template>
    <div  id="app">
        // router-link是vue中注册好的
        <router-link :to="'home'+userId">首页</router-link>
        <router-link to="/about">关于</router-link>
　　　　　// router-view决定渲染好的组件放到什么位置--占位
　　　　　<router-view></router-view>
    </div>
</template>

data(){
　　return {
　　　　userId:zs001
　　}
}

 

3.home页面，接收参数：

<template>
    <div>
        <h2>我是首页</h2>
　　　　　<p>用户ID是{{userId}}</p>
　　　　　<p>用户ID另一种获取方式：{{$route.params.userId}}
    </div>
</template>

data(){
    return{
        userId:''
     }
},
create:{
    this.userId = this.$route.params.userId
}