vue路由传参 params和query的区别

Vue的路由传参有两种方式，params和query ，他们的区别是什么呢？

params传参

this.$router.push({
 name:"detail",
 params:{
 name:'nameValue',
 Code:’this.Code'
 }
});

query传参

query传参
this.$router.push({
 path:"/detail",
 query:{
 name:'nameValue',
 Code:’this.Code'
 }
});

query传参
this.$router.push({
 name:"detail",
 query:{
 name:'nameValue',
 Code:’this.Code'
 }
});

可见他们写法十分类似，但是query支持用name和path来引入路由，params只支持name来引入路由
接收参数也是类似的 以上面传的参数来举例

分别是
this.$route.query.name  和  this.$route.params.name
//注意这里是this.$route不是this.$router

另外，params传参还有个弊端就是刷新页面后参数会丢失，可以考虑本地储存来解决

简单来说，query更加类似于请求中的get，而params则类似于post，前者会在浏览器地址栏显示参数，后者则不显示