vue路由传参之使用query传参页面刷新数据丢失问题解析
更新时间：2023年04月14日 14:53:28 作者：无·糖
这篇文章主要介绍了vue路由传参使用query传参页面刷新数据丢失问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue路由传参（使用query传参页面刷新数据丢失问题）
1. 路由传参的两种方式
1. params传参（刷新页面数据会丢失）
this.$router.push({
name:'xxx',
params:{
id:id
}
})
//接收参数:
this.$route.params.id2. query传参（刷新数据不会丢失）
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
//接收参数:
this.$route.query.id2. 使用query传参页面刷新数据丢失问题
注意
在query传参的时候可能会遇到一个问题：当传递参数为对象时，第一次跳转数据是没问题的，但第二次刷新页面数据会变为[object object]
解决办法：
要跳转的传参页：先将数组转换为字符串。
detailFun(row) {
//console.log(JSON.stringify(row))
this.$router.push({
path: '/product',
query: { productDetail: JSON.stringify(row) }
})
},接收页面：
created() {
this.orderDetail = JSON.parse(this.$route.query.productDetail)
}这样转换一下刷新后数据就不会丢失。
到此这篇关于vue路由传参（使用query传参页面刷新数据丢失问题）的文章就介绍到这了,更多相关vue路由传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中marker被识别点击的过程场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Vue3不支持Filters过滤器的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
这篇文章主要介绍了vue如何使用mixins优化组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
vue3如何定义变量及ref、reactive、toRefs特性说明
这篇文章主要介绍了vue3如何定义变量及ref、reactive、toRefs特性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue实现全局的toast组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了el-tree懒加载的实现以及局部刷新方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue2与vue3中获取模版引用ref的方法与区别,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
下面小编就为大家分享一篇vue实现图片加载完成前的loading组件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
今天小编就为大家分享一篇vue.js 子组件无法获取父组件store值的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于vue操作dom元素的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论