Vue-router路由传参什么时候用query,什么时候用params

请不要说区别,明白二者使用上的区别,我想知道的是,在实际项目中二者使用情况,以及原因,感谢!

query参数会显示在url上,params不会,所以query传参刷新页面参数还在,所以一般如果在一些需要分享的页面或者详情页,参数是要用query的,比如搜索结果页,xxxx.com?key=关键词 ,这样你再刷新还是看这个结果,或者你做了商品详情页,你可以将商品id拼接到路由里,比如xxx/detail/0001 ,或者就是用query参数,xxx/detail?id=00001,这样页面分享出去,别人还能拿到这个id,然后请求获取详情信息

query语法:

this.$router.push({path:"地址",query:{id:"123"}}); 这是传递参数

this.$route.query.id; 这是接受参数

params语法:

this.$router.push({name:"地址",params:{id:"123"}}); 这是传递参数

this.$route.params.id; 这是接受参数

以上就是这两种方法得语法,那大家也能从中看出一点区别:

1.首先就是写法得不同,query 得写法是 用 path 来编写传参地址,而 params 得写法是用 name 来编写传参地址

2.接收方法不同, 一个用 query 来接收, 一个用 params 接收 ,总结就是谁发得 谁去接收

3.query 在刷新页面得时候参数不会消失,而 params 刷新页面得时候会参数消失,可以考虑本地存储解决

4.query 传得参数都是显示在url 地址栏当中,而 params 传参不会显示在地址栏

可以类比get和post

地址中?后面的参数用query ,拼接在url路径中的用params