vue路由传参刷新后数据丢失问题及解决
vue路由传参刷新后数据丢失
出现刷新后数据丢失的情况可分为：
- 1、路由传参；
- 2、从vuex获取参数
首先说一下：
1、路由传参
路由传参可分为query传参和params传参
（1）、query传参，参数会在地址栏中显示，如果你传的是字符串，刷新后页面的数据是不会丢失的，如果传的是对象或者是数组，那么刷新后，页面的数据就会丢失，此时解决的方法是，将复杂数据类型，传的时候转化成字符串，子组件接受的时候再转化过来，这样刷新后就不会丢失啦
（2）、params传参，无论是你参数是字符串还是复杂数据类型，刷新后子组件的页面数据都会丢失
解决办法：
使用params中的路由匹配
使用方式：在router.js，即匹配路由规则的位置，加上占位符即可
{
path: '/index/:num/:name',
name: 'index',
component: Index
}
params中的参数名称需要和占位符的名称一致即可
获取参数，还是和获取params中参数一致：this.$route.params.name
这样的话，参数就会出现在url中，格式为：url/num/name，这种方式将参数放在url上，刷新的时候才不会丢失数据。
综上所述，自己的出的一个小结论：
如果不使用其他方法，只是路由传参，要想刷新后数据不丢失，
你的参数就要出现再url地址中，虽然params传递的参数不出现在url地址，
但是要想解决params传参数据刷新不丢失，还得把参数出现在url地址栏中
2、从vuex获取参数
页面刷新store.state中的数据消失是不可避免的，那么使用localStorage来避免这个问题。
发现问题的时候我就考虑到存数据在localStorage里，但是一个一个数据添加实在是太蠢了。
那么就需要一个全局的方法来，将store的数据存储在localStorage里。
具体的方法也是百度的很好用，也很方便。
在App.vue中，created初始化生命周期中写入以下方法
自己项目中使用的方法
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem('store'))
)
)
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})作者的方法
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
})
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));两种方法基本一致
最后说一下，为什么vuex刷新后数据会丢失：
其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了el-dialog关闭再打开后窗口内容不刷新问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
vue :style设置背景图片方式backgroundImage
这篇文章主要介绍了vue :style设置背景图片方式backgroundImage,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Element Carousel 走马灯的具体实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下2018-07-07
生产环境中将项目依赖的一些第三方包替换成通过cdn方式外部加载,而不是打包到 vender,对于提升应用的加载、响应速度很有意义,下面这篇文章主要给大家介绍了关于vue项目中如何通过cdn引入资源并配置的相关资料,需要的朋友可以参考下2022-06-06
vue新玩法VueUse工具库具体用法@vueuse/core详解
这篇文章主要介绍了vue新玩法VueUse-工具库@vueuse/core,VueUse不是Vue.use，它是一个基于 Composition API 的实用函数集合，下面是具体的一些用法，需要的朋友可以参考下2022-08-08
vue/Element UI实现Element UI el-dialog自由拖动功能实现
最近工作上需要在el-dialog基础上进行些功能的改动,下面这篇文章主要给大家介绍了关于vue/Element UI实现Element UI el-dialog自由拖动功能实现的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于vue中如何使用echarts动态渲染数据的相关资料,echarts是一款基于JavaScript的开源可视化图表库,它通过简单的配置即可实现各种各样的可视化效果,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue 中的受控与非受控组件的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论