vue页面刷新时丢失路由数据（Vue刷新后页面数据丢失）

一、为什么刷新后数据会丢失

 vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

二、解决思路

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

分析：

办法一的缺点是不安全，不适用大数据量的存储；

办法二适用于少量的数据，并且不会出现网络延迟；

办法三是要讲的重点，办法二和办法一一起使用。 

以上出自：Vue刷新后页面数据丢失问题的解决过程_vue.js_脚本之家 (jb51.net)

本文选择把路由中的数据存储到sessionStoage

存储值的方法

//标准方法：把数据存入sessionStorage
sessionStorage.setItem("assessmentInfo",JSON.stringify(assessmentInfo));

获取值的方法

标准方法：从sessionStorage取出数据

const assessmentInfo = JSON.parse(sessionStorage.getItem("assessmentInfo"));

三、解决方法

本人选择的是sessionStorage，选择的原因是：

其一，由于vue是单页面应用，操作都是在一个页面跳转路由，我只需要在当前页面使用key；

其二，使用sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。

具体代码：

...  
methods: {
    //接受页面跳转传递的信息
    getRouterInfo() {
      this.pushGateWay = this.$route.params.pushGateWay   //提交问卷路径
      this.pushJumpWay = this.$route.params.pushJumpWay  //提交问卷跳转路径
      if(this.pushGateWay === undefined){  //判断是否接受到数据
        const assessmentInfo = JSON.parse(sessionStorage.getItem("assessmentInfo"));//获取存在sessionStorage中的数据
        this.pushGateWay = assessmentInfo.pushGateWay   //提交问卷路径
        this.pushJumpWay = assessmentInfo.pushJumpWay  //提交问卷跳转路径
      }else{ //如果有数据
        const assessmentInfo = {
          pushGateWay:this.pushGateWay,
          pushJumpWay:this.pushJumpWay,
        }
        sessionStorage.setItem("assessmentInfo",JSON.stringify(assessmentInfo));//把数据存入sessionStorage中
      }
    },
}
...

四、总结

sessionStorage、localStorage、cookie三者的区别：

localStorage -- 是永久存储在本地，除非你主动去删除;【手动删除】

sessionStorage -- 是存储到当前页面关闭为止，和其他tab页没关联;【页面关闭就没有了】

cookie -- 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取，会和后台进行交互。