vue中的动态路由怎么配置

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

1.定义路由

/在APp.vue中
用户
//在index.js中
{
path:'/user/:userid'
component: User,
}

2.路由跳转

// 方法1:
按银

3.参数获取

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

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

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

2.跳转方法

// 方法1:
按
 方法2:
this.$router.push([ name: 'users', query:f uname:james ]))
方法3:
按镇
方法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 是“路由实例”对象包括了路由的跳转方法，钩子函数等