vue-router 跳转页面传递参数并获取参数

一、跳转页面

   有些时候我们从A页面跳转到B页面需要传递一个或多个参数,例如从列表页进入详情页

   代码:

 <router-link :to="{path:'/detail',query:{id:item.id,a:1}}">{{item.title}}</router-link>

path:要跳入页面的路径

query: 就是想要传递的参数,可以为一个也可以多个。这样路径就会被渲染成这样

二、获取参数

使用 this.$router.query 即可获取到传递的参数 

例如获取上图中地址栏的参数:

   tab: _this.$route.query.tab,
   a:_this.$route.query.a,

这样就能获取到参数,返回的是一个key/Value的对象,this.$router.query.a ==1,若没有,则返回一个空对象

需要注意的是:

1、在方法中使用 this.$router.query 可能得到undefined。因为这个this可能指代的是该方法中的,而不是vue的,所以需要将this

重回赋给一个变量代替就可以获得

若有不正确的地方,请指正。谢谢

猜你喜欢

转载自blog.csdn.net/weixin_39570075/article/details/83109543