使用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

Logo

前往低代码交流专区

更多推荐