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里面的数据就会被重新赋值
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
详解Vue-cli中的静态资源管理（src/assets和static/的区别）
这篇文章主要介绍了Vue-cli中的静态资源管理（src/assets和static/的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本文主要介绍了element el-tree折叠收缩的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
购物车是电商必备的功能,可以让用户一次性购买多个商品,下面这篇文章主要给大家介绍了关于前端Vue学习之购物车项目的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了vue+elementui实现拖住滑块拼图验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
图片和文件上传在很多项目中都可以使用的到，本文主要介绍了VUE+element-ui文件上传的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了基于Vue的延迟加载插件vue-view-lazy，可以使图片或者其他资源进入可视区域后加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的。这篇文章给大家介绍vue-swiper的使用教程，感兴趣的朋友一起看看吧2018-08-08
Vue Loader 作为一个 webpack 的 Loader,扮演着将 .vue 文件转化为浏览器可执行代码的角色,下面就跟随小编一起深入了解Vue Loader 的技术细节与工作机制吧2024-12-12
这篇文章主要介绍了vue-codemirror实现在线代码编译器 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
在许多的后台系统中少不了导出Excel表格的功能,下面这篇文章主要给大家介绍了关于Vue3.0导出数据为自定义样式Excel的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
最新评论