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里面的数据就会被重新赋值

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。