vue中params与query区别

关于vue-router 中参数传递的那些坑（params，query)

vue-router传递参数分为两大类：

1. 编程式的导航 router.push
2. 声明式的导航

**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页面====接收不到参数====

以上代码亲测有效，大佬们不喜勿喷。