vue-router使用query传对象、数组,刷新后参数丢失
在页面之间跳转,需要携带参数。正常传参的话就vue-router的params,query两种,或者使用localStorage本地持久化存储。为了刷新不丢失数据, 我使用query进行传参,但是我传的是一个对象。发现刷新后,即使url里还有object的相关信息,但是数据还是丢失了。原因:第一次跳转,是没有问题的。刷新页面后,url里的object就会变成字符串,数据就丢失了。解决方法:使用JS
·
在页面之间跳转,需要携带参数。正常传参的话就vue-router的params,query两种,或者使用localStorage本地持久化存储。
为了刷新不丢失数据, 我使用query进行传参,但是我传的是一个对象。发现刷新后,即使url里还有object的相关信息,但是数据还是丢失了。
原因:
第一次跳转,是没有问题的。刷新页面后,url里的object就会变成字符串,数据就丢失了。
解决方法:
使用JSON.stringify将对象数据包裹,转换为字符串。在接收时使用JSON.parse解析回对象。
// 传参
this.$router.push({
name: 'PreGenerateVoucher',
query: {
voh_config: JSON.stringify({
bill_name: item.bill_name,
os_bill_type: item.bill_type,
year: year,
month: month
})
}
})
// 接收
mounted() {
this.voh_config = JSON.parse(this.$route.query.voh_config)
const leng = this.$store.state.tagsView.visitedViews.length
// 修改页签名字
this.$store.state.tagsView.visitedViews[leng - 1].title = '选择' + this.voh_config.bill_name
this.refreshEvent()
}
更多推荐
已为社区贡献7条内容
所有评论(0)