vue中的动态路由怎么配置

如何定义动态路由? 如何获取传过来的动态参数?
一.param方式
配置路由格式: /router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123

1.定义路由

/在APp.vue中
<router-link :to=/user/'+userId”replace>用户</router-link>
//在index.js中
{
path:'/user/:userid'
component: User,
}

2.路由跳转

// 方法1:
<router-link :to="[ name: users', params: [ uname: wade ]]">按银</router-link
// 方法2:
this.$router.push(fname: 'users',params:funame:wade11)
// 方法3:
this.$router.push('/user/' + wade)

3.参数获取

通过$route.params.userid获取传递的值

二.query方式
也就是普通配置配置路由格式:/router传递的方式:对象中使用query的key作为传递方式传递后形成的路径: /route?id=123
1.路由定义

//方式1: 直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',query:[name:'why',age:28,height:188]}">档案</roter-link>
方式2: 写成按钮以点击事件形式
<button @click='profileClick'>我的</button>
profileClick(){
this.$router.push({
path:"/profile",
query: {
name:"kobi"
age:"28"
height: 198
}
});
}

2.跳转方法

// 方法1:
<router-link :to="[ name: users', query: [ uname: james ">按</router-link>
 方法2:
this.$router.push([ name: 'users', query:f uname:james ]))
方法3:
<router-link :to="[ path: '/user'， query: [ uname:james ]]">按镇</router-link>
方法4:this.$router.push({ path: '/user', query: uname:james ]})
// 方法5:
this .$router.push( /user?uname=' + ismes)

3.获取参数

通过$route.query获取传递的值

拓展

$route 和$router 的区别
$route 是“路由信息对象”，包括 path，params， hash，query， fullPath, matched，name 等路由信息参数
$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等