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

一、跳转页面

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

   代码：

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

path：要跳入页面的路径

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

二、获取参数

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

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

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

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

需要注意的是：

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

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

 

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