Vue uses history to record the data method instance of the previous page

Time:2021-1-17

This article mainly introduces the relevant information about Vue using history to record the data on the previous page. In this article, the example code is introduced in great detail, which has a certain reference learning value for your study or work. Friends who need to follow the editor to learn

preface

This article mainly introduces Vue’s use of history to record the relevant content of the data on the previous page. Vue can make the URL more beautiful after using history, that is, there is no longer the problem of ‘#’, so let’s take a look at the detailed introduction

demand

Enter the details page from the second page of the list page. When you return, the list page will still be displayed on the second page;

Enter the details page from the second page of the list page. When you return, the filter condition of the list page still exists.

Technology selection

Using the Vue router component, through this$ router.push ({path: path, query: query}); The page number and selection conditions are stored in the URL as parameters. This method is feasible in the above UI design, but when the list page contains tab component (paging component is public), some problems (PS: it may also be due to my technical ability) will be caused by the push factor (push will open a new page).
Using the history API (supported by HTML5), the history.replaceState The page number is stored as a parameter in the URL, and the selection condition is stored in the history (it is not clear where the data is stored) location.hash Get page number by history.state Method to get the selection condition of storage.
Concrete realization technology selection 2

switch

Add an open route for the paging component, because the gray level needs to be online. In case of problems, there is only one page to adjust. The code is as follows:

`<script>`
`export` `default` `{`
`props: {`
`openroute: {`
`type: Boolean,`
`default``: () => (``true``)`
`}
`},`
`}`
`</script>`

Page number storage and selection condition in paging component & getting page number

`<script>`
`export` `default` `{`
`methods: {`
`fetchData(page) {`
`/Request parameters`
`let params =` `this``.params;`
`//Request page number`
`let newPage;`
`//Openroute processing`
`if` `(``this``.openroute) {`
`//Add page to URL`
`if` `(page) {`
`history.replaceState(params.data, document.title,` `"#"` `+ page);`
`}` `else` `{`
`if` `(history.state) {`
`if` `(!history.state.key && location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`if` `( JSON.stringify ( history.state ) !==  JSON.stringify ( params.data )){'' // select condition change to request the first page`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);`
`}`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}`
`}` `else` `{`
`if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}`
`}`
`}`
`//Get the page after the URL`
`if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`newPage = Number(location.hash.split(``"#"``)[1]);`
`}` `else` `{`
`newPage = 1;`
`}`
`}` `else` 
`{`
`newPage = page;`
`}`
`//Request data, get the result, and pass it to the list page`
`}`
`}`
`}`
`</script>`

List page to get selection conditions

At present, it may be due to the design of the framework, which can not be passed before the data request Object.assign The method is to replace the initial variable, so deal with it like this first (stupid method, you guys have a solution, please guide, thank you)

`<script>`
`export` `default` `{`
`data()
 {`eturn`
`{`
`form: {`
`aaa: (history.state && history.state.aaa) ? history.state.aaa :` `null``,`
`bbb: (history.state && history.state.bbb) ? history.state.bbb :` `null``,`
`ccc: (history.state && history.state.ccc) ? history.state.ccc :` `null`
`},`
`};`
`}`
`};`
`</script>`

It has been solved that the initial variable does not need to be changed and can be realized in the following ways:

`if` `(history.state) {`
`Object.assign(``this``.form, history.state)`
`if` `(``this``.form.key) {`
`delete` `this``.form.key`
`}`
`}`
`},`

Record here: I thought that the created method was executed after the paging component’s watch listening, but later I found that it was misled (because I used to use the Object.assign (true, this.form , history.state )Method to achieve data assignment, but did not succeed). Here’s a summary:

Object.assign (true, a, b); “and“ Object.assign (a, b); “what’s the difference?

Conclusion: the former: changing a does not affect B; the latter: changing a affects B

Analysis (this article has a source code analysis (< font color = Red >): how to associate source code in webstorm? < / font >), great:

FAQ

Need to use history.replaceState The way is: it does not press the changed URL into the history stack, so it does not increase the number of fallback and forward steps;
use history.replaceState The size of the state that can be stored cannot operate 640K;
There may be browser compatibility issues, please check here:https://caniuse.com/#feat=his…
Demo Or Source

Because it is a company project, there is no demo or source code at present

summary

The above is the whole content of this article, I hope the content of this article has a certain reference value for your study or work