美文网首页
Vue-router tips

Vue-router tips

作者: BabyMT | 来源:发表于2020-01-06 11:35 被阅读0次

1. $route和$router的区别

在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数。
在路由跳转的时候除了用router-link标签以外,也可以使用this.$router.push('')。
当在控制台打出this的时候,发现$route和$router同时存在。

$router

router是VueRouter的实例,相当于一个全局路由对象,里面含有很多属性和子对象,如history,经常使用的$router.go方法就是返回上衣history。

$route

route相当于当前正在跳转的路由对象,可以获取当前router跳转对象里面的name、path、query、params等。
一个是全局的,一个是当前的

2.路由传参方式

1.手写完整path
this.$router.push({path:`/user/${userId}`})。

这样传递参数的话,配置路由的时候需要在path上加参数path:user/:userId。
这种接收参数的方式是this.$route.params.userId。

2.用params传递
router.push({name: 'user', params: {userId:123})
3.用query传递
router.push({path: 'register', query: {plan:'private})

query传参是针对path的,params传参是针对name的,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

相关文章

网友评论

      本文标题:Vue-router tips

      本文链接:https://www.haomeiwen.com/subject/zdvhactx.html