记录关于Vue路由参数query和params的区别以及query传递对象遇到的坑

Vue之路由参数query和params的区别以及query传递对象遇到的坑

首先简单来说明一下$router和$route的区别

 $router : 是路由操作对象，只写对象

 $route : 路由信息对象，只读对象

query传参：

如何获取？

this.$route.query.insuraceDetailData即可拿到参数

我们的this.data是个对象

细心的小伙伴可以发现，为啥要用JSON.stringify(this.data)转换为 JSON 字符串，后面给大家解密

params传参：

我们获取params的参数可以这样

this.$route.params.insuraceDetailData

但是以params参数来获取，会有个问题

相信很多和我一样的Vue小白会遇到这么个坑

当刷新浏览器的时候，会发现获取不到参数了,或者参数丢失

而query参数却不会

细心的小伙伴可以发现浏览器上的url，query参数会体现在url上面而params却不会，这就是这2个的区别

那聪明的小伙伴就会说，那我一直用query不就行了嘛

但是他也有个问题，当我们query携带的参数为对象的时候，就比如说我们的this.data，这个时候，刷新浏览器，

会发现浏览器上面会有一串除了地址，后面拼接了看不懂的乱码参数在啊，但是this.$route.query.insuraceDetailData却拿不到了，这就是query的问题

那么怎么解决呢

可以用JSON.stringify(要传递的对象)，接受的话用JSON.parse(this.$route.query.insuraceDetailData)

这样前面的问题就可以完美解决了！！！！

大家一起进步