vue-router 跳转页面传递参数并获取参数
一、跳转页面有些时候我们从A页面跳转到B页面需要传递一个或多个参数,例如从列表页进入详情页代码:<router-link :to="{path:'/detail',query:{id:item.id,a:1}}">{{item.title}}</router-link>path:要跳入页面的路径query: 就是想要传递的参数,可以为一个...
·
一、跳转页面
有些时候我们从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
重回赋给一个变量代替就可以获得
若有不正确的地方,请指正。谢谢
更多推荐
已为社区贡献1条内容
所有评论(0)