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

  • 1
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值