VueRouter的params和query传参区别

1 题引

当页面跳转的时候，很多情况下需要用到上个页面的数据，所以这个时候就需要上个页面把参数传入下一页面，在vue里面就是需要使用到路由传参。

2 传参方式

这里先来考虑下通过编程式传参的情况，有两种传参的方式分别是query和params

query和params的使用：

点击查看代码

query语法：
传递：this.$router.push({path:"地址",query:{id:"123"}});

接收：this.$route.query.id；

params语法：
传递：this.$router.push({name:"地址",params:{id:"123"}});

接收：this.$route.params.id;

3 区别

1 query用path来跳转，params用name来编跳转，如果不对应，参数传不过去

2 接收方法不同， 一个用 query 来接收， 一个用 params 接收

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

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

4 补充

1 route是路由对象信息，用来查看就可以了
2 router 是路由对象的实例，可以用来操作，类似于2中的操作