Vue 路由带对象参数跳转，刷新后参数不消失

使用vue-router路由跳转并传一个对象，刷新之后会发现数据变成[Object,Object],对于想要跳转之后获取传过来的对象利用平时的方法显然是可取的。前段时间遇见这个小问题，上网搜索发现回答问题的大多偏离题意。遂开笔记录一下解决方法~~

方法一：对象转换

当前页面：
let order = JSON.stringify(new Order(obj));
this.$router.push({
    path:'/checkOrder',
    push:{ 'order': order }
})
复制代码

跳转接收页面：
this.order = JSON.parse(this.$route.query.order);
复制代码

这个方法可以实现重复刷新数据不消失，但是地址栏显示如下：

order=%7B"orderId"%3A"1002546137","beginTime"%3A"2018.07.13%2020%3A45","PooNumber"%3A10,"price"%3A1230000
复制代码

数据少还好，数据多那地址栏就放不下了，不过它的好处就在于“可携带”

方法二：借助localStorage

当前页面：
let order = new Order(obj);
this.$router.push({
    path:'/checkOrder',
    push:{ 'order': order }
})
复制代码

跳转接收页面：
if( this.$route.query.order instanceof Object){
    setStore("orders", this.$route.query.order);
}
this.order = JSON.parse(getStore("orders"));
复制代码

这个思路很简单，就是将信息存到本地，这样就可以在本地获取，纵使怎么刷新都不会消失，且地址栏不会很长

order=%5Bobject%20Object%5D
复制代码

不过坏处就在于不便于“携带”，只有在本地才不会消失。 不过传对象如果不是很必要，不建议，至少完美解决的方案很少。当然如果有其他的解决方式欢迎讨论啦~~~~~

转载于:https://juejin.im/post/5b4dac8ef265da0f7f4499a8