Routing data is lost when the vue page is refreshed (page data is lost after Vue is refreshed)

1. Why data will be lost after refreshing

 The data stored in vuex is only in the page, which is equivalent to a global variable. When the page is refreshed, the data in vuex will be reinitialized, resulting in data loss. Because the data in vuex is stored in the running memory, when the page is refreshed, the page will reload the vue instance, and the data in vuex will be reassigned.

2. Solutions

Method 1: Save the data in vuex directly to the browser cache (sessionStorage, localStorage, cookie)

Method 2: Request remote data again when the page is refreshed to dynamically update vuex data

Method 3: Request remote data from the background on the parent page, and save the vuex data to sessionStorage before the page is refreshed (in case the requested data volume is too large and the returned data cannot be obtained when the page loads)

analyze:

The disadvantage of method 1 is that it is not safe and does not apply to the storage of large amounts of data;

Method 2 is suitable for a small amount of data, and there will be no network delay;

Method three is the key point, and method two and method one are used together. 

The above is from: The process of solving the problem of page data loss after Vue refresh_vue.js_Script House (jb51.net)

This article chooses to store the data in the route to sessionStoage

method of storing the value

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

method to get the value

标准方法：从sessionStorage取出数据

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

3. Solutions

I chose sessionStorage for the following reasons:

First, since vue is a single-page application, all operations are redirected to one page, and I only need to use the key on the current page;

Second, using sessionStorage can ensure that the sessionStorage data is empty when the page is opened, and if it is localStorage, the data of the last opened page will be read.

Specific code:

...  
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中
      }
    },
}
...

Four. Summary

The difference between sessionStorage, localStorage, and cookie:

localStorage  -- is permanently stored locally, unless you take the initiative to delete; [manually delete]

sessionStorage  -- It is stored until the current page is closed, and it is not related to other tab pages; [there will be no page when the page is closed]

cookie  -- it is stored according to the effective time you set, but the disadvantage is that it cannot store large data and is not easy to read, and it will interact with the background.