0
点赞
收藏
分享

微信扫一扫

怎么定义Vue-router的动态路由?怎么获取传过来的动态参数?


我们经常需要把某个模式匹配到的所有路由,全都映射到同一个组件,例如,
我们有一个 User 组件,对于所有 ID 各不相同的用户,
都要使用这个组件来渲染,
那么我们可以在vue-router的路由路径中使用 “动态路由参数” 来达到这个效果

1. 动态路径参数,使用 “冒号” 开头,一个路径参数,使用冒号标记,当匹配到一个路由时,
2. 参数会被设置到 this.$router.params 中,并且可以在每个组件中使用

this.$router.push({
name:"路由地址",
params:{
name:'要发送的数据',
}
});

//读取 路由参数接收
this.name = this.$route.params.name;

2. 现在我们知道了 可以通过动态路由传参,在路由中设置了,
3. 多段路径参数后,对应的值分别都会设置到 $router.query 和 $router.params 中

query 和 params 之间的区别是什么?
query 要用 path 来引入,params 需要用 name 来引入

接收参数时,分别是this.r o u t e . q u e r y . n a m e 和 t h i s . route.query.name 和 this.route.query.name和this.route.params.name

query 更加类似于我们 ajax 中 get 传参,params 则类似于 post,前者在浏览器的地址中显示,params 不显示

params 传值一刷新就没了,query 传值刷新还存在

$route 和 $router 的区别是什么?


$route 是 “路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

$router 为 VueRouter 的实例,相当于一个全局的路由器对象,
里面包含有很多属性和子对象,例如 history 对象,
经常使用的跳转链接就可以用 this.router.push 会往 history 栈中添加一个新的记录,
返回上一个 history 也是使用 $router.go 方法。


举报

相关推荐

0 条评论