vue中query和params的区别（vue传参方式介绍）[vue教程]

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

爱学社区vue教程

想要导航到不同的 URL，则使用 router.push方法。这个方法会向 history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

这里我们主要采用对象跳转形式。

要跳转页面的path属性值：router.push({ path: 'my-exchange' })，对应router数组对象中的path属性值：

要跳转页面的name属性值：router.push({ name: 'my-exchange-index' })，对应router数组对象中的name属性值：

vue教程

给页面传参则在push函数传入的实参对象中的第二个属性传入 query或 params对象即可，对象中写具体要传的参数（注：如果query或 params对象中的属性传入的有引用类型的，则需要JSON.stringify(引用类型)转化一下）。

在对应的页面接收也只需要：this.$route.query或 this.$route.params:

官方解释：

vue

其中我个人建议对象的第一个属性用name来控制要跳转的页面，因为如果是path的话，params属性将会被忽略（也就是说传参要采用拼接字符串的方式，超不利于代码越多，看的还不舒服）。

同时对于第二个属性，我个人建议采用query来进行路由传参，因为 params 对象传参，只要页面一刷新你传入的参数就没了，query则保存在url地址中，你怎么刷新它都还在。

小总结一下：

使用params传参在浏览器的url地址栏中是不可见得，query则类似于get传参，是可见的。

params传参会丢失数据，query不会。

不过虽然params传参会丢失数据，但是它不会污染 url 路径，会显得 url 路径特别的整洁干净。

所以偶尔也会使用params传参。

当然啦，也有很多方法可以处理params传参会丢失数据问题，比如通过Cookies来存储数据即可。

在页面进入就执行的生命周期函数中看一下 this.$route.params 中有没有东西，如果有，则把它存到 Cookies 里面，如果页面刷新了，数据没了，则直接从Cookies 里面拿即可。

关注本站更多学习内容请收藏本站或保存本站永久网址[www.axue5.com]每天更新学习资源和各种,破解软件,福利美图技术教程,线报活动等网络资源！