Vue uses History to record the data method of the previous page. Code introduction

This article mainly introduces you to the code introduction of Vue's method of using History to record the data of the previous page. The article introduces it in detail through sample code. Friends who need it can refer to it.

Preface

This article mainly introduces the relevant content of Vue using History to record the data of the previous page. After Vue uses history, it can make the URL more beautiful, that is, there will no longer be a '#' Question, I won’t go into details below, let’s take a look at the detailed introduction

Requirements

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

Enter the details page from the second page of the list page, and the filtering conditions of the list page still exist when you return.

Technical Selection

Use the vue-router component to store the page number and selection conditions as parameters in this.$router.push({path: path, query: query}); URL, this method is feasible in the above UI design, but when the list page contains the tab component (the paging component is public), it will cause some problems due to the push factor (because push will open a new page) ( PS: It may also be due to my technical ability), it has not been implemented.
Use the History API (HTML5 starts to support), use the history.replaceState method to store the page number as a parameter in the url, and store the selection conditions in the history (it is not clear where the data is stored); through location.hash Get the page number through the history.state method; get the stored selection conditions through the history.state method.
Specific implementation--Technical selection 2

Switch

Add a switch (openroute) for the paging component, because it needs to be online in grayscale. In case there is a problem, the only pages to be adjusted are one. The code is as follows:

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

Storing page numbers and selection conditions in the paging component & getting page numbers

`<script>`
`export` `default` `{`
`methods: {`
`fetchData(page) {`
`/请求参数`
`let params =` `this``.params;`
`//请求页码`
`let newPage;`
`//openroute处理`
`if` `(``this``.openroute) {`
`//为url添上#page`
`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)) {` `//选择条件变更则请求第一页`
`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"``);`
`}`
`}`
`}`
`//获取url后面的#page`
`if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`newPage = Number(location.hash.split(``"#"``)[1]);`
`}` `else` `{`
`newPage = 1;`
`}`
`}` `else` 
`{`
`newPage = page;`
`}`
`//请求数据，获得结果，传递给列表页面`
`}`
`}`
`}`
`</script>`

Getting selection conditions on the list page

Currently it may be because of the framework design problem, there is no way Before requesting data, replace the initial variables through Object.assign method, so deal with it like this first (stupid method, if you have a solution, please guide me, 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>`

has been solved, the initial variables do not need to be moved , can be achieved in the following ways:

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

Recorded here: I thought that the created method was executed after the watch monitoring of the paging component, but later I found that I was misled (because it was previously done through Object.assign(true, this .form, history.state) to achieve data assignment, but it was not successful). Let’s make a brief summary:

What is the difference between “Object.assign(true, a, b);” and “Object.assign(a, b);”?

Conclusion: The former: Changing a does not affect b; the latter: changing a affects b

analysis (this article has source code analysis (Please answer: How to associate source code in WebStorm?

FAQ

You need to use the history.replaceState method because: it will not push the changed url into the history stack, so it will not increase the rollback and Number of forward operation steps;
Using the history.replaceState method, the storable state size cannot be operated 640k

The above is the detailed content of Vue uses History to record the data method of the previous page. Code introduction. For more information, please follow other related articles on the PHP Chinese website!