关于vue-router 中参数传递的那些坑(params,query)
vue-router传递参数分为两大类:
- 编程式的导航 router.push
- 声明式的导航
**query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示,但是刷新页面之后参数会消失,可以使用localStorage进行存储。**代码如下:
if(this.$route.params.userId){
this.value = this.$route.params.userId;
localStorage.setItem('content',this.$route.params.userId)
}else{
this.value = localStorage.getItem('content')
console.log(this.value)
}
很多人都说query传参要用path来引入,params传参要用name来引入,确实是这样,不过只针对router-link方法,具体看代码
<router-link :to="{path:'/about/shopList',query:{userId:123}}">
吃火锅
</router-link>
<router-link :to="{name:'shopList',params:{userId:456}}">
吃羊蝎子
</router-link>
他们同样都跳转到shopList页面,通过this.$route.params.userId和this.$route.query.userId都获取到了参数
如果将代码换成如下:
<router-link :to="{path:'/about/shopList',params:{userId:123}}">
吃火锅
</router-link>
<router-link :to="{name:'shopList',query:{userId:456}}">
吃羊蝎子
</router-link>
同样跳到shopList页面,却拿不到参数userId。。。
router.push并不是如此,直接上代码
1.this.$router.push({
name: 'shopList',
params:{
userId: 666
}
})
2.this.$router.push({
name: 'shopList',
query:{
userId: 666
}
})
不仅name和params传递的参数有效,而且name和query传递的参数也是有效的。
3.this.$router.push({
path:'/about/shopList',
query:{
userId: 666
}
})path和query传递参数,在shopList页面可以===接收到参数===
4.this.$router.push({
path:'/about/shopList',
params:{
userId: 666
}
})path和params传递参数,在shopList页面====接收不到参数====