Data loss problem after refreshing vue routing parameters and its solution

Data is lost after refreshing the vue route parameter

Data loss after refresh can be divided into:

• 1. Routing parameters;
• 2. Get parameters from vuex

Let me first talk about it:

1. Routing parameters

Routing parameters can be divided into query parameters and params parameters.

(1) Pass the query parameter, the parameters will be displayed in the address bar. If you pass a string, the data on the page will not be lost after refreshing. If you pass an object or an array, the data on the page will be lost after refreshing. The solution at this time is to convert the complex data type into a string when passed, and convert it when the child component accepts it, so that it will not be lost after refreshing.

(2) Params parameter transmission, no matter whether your parameters are strings or complex data types, the page data of the subcomponent will be lost after refreshing

Solution:

Using route matching in params

How to use: in, that is, the position matching the routing rules and add a placeholder

{
  path: '/index/:num/:name',
  name: 'index',
  component: Index
}

The parameter name in params needs to be consistent with the placeholder name.

Getting parameters is the same as getting parameters in params: this.$

In this way, the parameters will appear in the url, in the format: url/num/name. This way, the parameters will be placed on the url so that data will not be lost when refreshed.

To sum up, I came up with a brief conclusion:

If you do not use other methods, just route parameters, and you want to not lose data after refreshing,

Your parameters will appear in the URL address, although the parameters passed by params do not appear in the URL address,

However, in order to solve the problem of refreshing the params parameter data without losing it, the parameters must be displayed in the URL address bar

2. Get parameters from vuex

The data disappearance in page refresh is inevitable, so use localStorage to avoid this problem.

When I found the problem, I considered that the data stored in localStorage, but adding data one by one is too stupid.

Then a global method is needed to store the store's data in localStorage.

The specific method is also very useful and convenient for Baidu.

In the created initialization life cycle, write the following method

How to use in your own project

//Read the status information in sessionStorage when the page is loading    if (('store')) {
      this.$(
        (
          {},
          this.$,
          (('store'))
        )
      )
    }
    //Save the information in vuex to sessionStorage when the page is refreshed
    ('beforeunload', () => {
      ('store', (this.$))
    })

Author's method

//Save the information in vuex to localStorage when the page is refreshed("beforeunload",()=>{
  ("messageStore",(this.$))
})
 
//Read the status information in localStorage when the page is loading("messageStore") && this.$((this.$,(("messageStore"))));

The two methods are basically the same

Finally, let me talk about why the data is lost after vuex is refreshed:

In fact, it is very simple, because the data in the store is stored in running memory. When the page is refreshed, the page will reload the vue instance, and the data in the store will be reassigned.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.