Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge about how Vue routing returns to restore the state of the page. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Routing parameters, routing navigation guards: keep the search results when the page goes back.

Demand scenario: search the content on the home page, click to jump to the details page, the page goes back to the home page, and keep the search results.

Solution: routing parameters; routing guards

Requirement description

When using the Vue development front end, we encounter a scenario: do some data search on the home page, click on the search results to enter the details page, browse the details page and return to the home page. But at this time, the previous search records and page flipping disappeared, and the user experience was not good. So you need to restore the page parameter state before the jump after the return.

Of course, if conditions permit, the easiest way is to click on the search results and open it with a new page (such as Baidu). But the current requirement is a complete Vue development project, not to open an off-site address, and there are not many details, so it is not appropriate to use a new page (poor performance and easy to create a large number of tabs).

Here are two solutions that are easier to implement

Option 1: store the search parameters in the routing parameters (route.query), and search according to the parameters when the page is loaded

Advantages: refresh does not affect; easy to implement

Disadvantages: the parameter can only be the basic type and the length is limited; the path looks ugly; it is only valid for the browser to return, and it is impossible to jump back to the home page manually.

Solution 2: use routing guard hooks to store page parameters locally (vuex, Local Storage, etc.) before leaving the page

Advantages: the length of the parameter type is relatively free; the path looks fresh and beautiful; it is effective to return to the home page in any way.

Disadvantages: additional data storage operations are required. Refreshing pages will fail if store mode or vuex is used.

Option 1: routing parameters

If there are not many parameters, and you don't mind having a long list of parameters behind the path (tears of obsessive-compulsive disorder), you can put the parameters directly in the routing path (for example, Baidu is like this: baidu.com/s?wd=abc&rsv_spt=1&rsv_iqid=0x8a76279a000e2979&..., can see, it's really a long list).

After clicking search, use vue router to jump and pass parameters:

/ / search page search (param) {/ / other processing this.$router.push ({name: "Index", query: {... this.queryParam}, / / expand the object to a key});}

Note the difference between query parameter transfer and params parameter transfer: the parameters of the former will continue at the end of the path in the form of? k1=v1&k2=v2, and can be seen directly in the address bar, so they are not affected by page redirection or refresh; the latter only works when you jump to the corresponding page for the first time, and then refresh the jump will be gone. So query is used here to pass parameters. It is also possible to manually write parameters in path in a format, but the readability and extensibility are significantly worse, and unless there are only one or two simple parameters, it is not recommended.

In addition, because this parameter is to be put into the path, it can only be a basic type of key-value pair, and arrays or objects are not well supported. If the parameter is simple, you can expand the corresponding object as a parameter (you need to ensure that there is no rename key in different objects), but when you read it in the search results page that you jump to, you can only get it attribute by attribute.

/ / the search results page mounted () {/ / distinguishes $route from $router if (this.$route.query.type) {let type = this.$route.query.type; let keyword = this.$route.query.keyword; / /. Get parameters one by one / / search operation} else {/ / No search parameters (because my search results are the same page as the home page, so it is possible to just open the home page normally)}}, scenario 2: store parameters locally

Because the parameters I want to save are three objects, it is too inconvenient to expand into key values, so I use this scheme. Since vuex is also used in the project, it is stored in vuex by the way, anywhere according to the actual situation. The disadvantage of vuex is that it is gone as soon as it is refreshed, which has little impact on the function of optimizing the experiential nature of search results; if there is a corresponding demand, it can be stored in local storage.

Because there are many ways to change parameters in my requirements, it is too troublesome to store parameters when changing, and it is easy to make mistakes or omissions. Therefore, it is chosen here to uniformly store the required parameters before the route jump.

Vue Router provides routing, navigation and guard series API to achieve the corresponding functions, including global front / parse / rear guard, route configuration guard, component guard and so on. The so-called "guard" is actually equivalent to the "hook" in the rendering process, just like the familiar created and mounted.

Complete navigation parsing process:

Navigation is triggered.

Invoke the beforeRouteLeave guard in the deactivated component.

Call the global beforeEach guard.

Invoke the beforeRouteUpdate guard (2.2 +) in the reused component.

Call beforeEnter in the routing configuration.

Parse the asynchronous routing component.

Call beforeRouteEnter in the activated component.

Call the global beforeResolve guard (2.5 +).

Navigation confirmed.

Call the global afterEach hook.

Triggers a DOM update.

Call the callback function passed to next in the beforeRouteEnter guard, and the created component instance will be passed as a parameter to the callback function.

Obviously, the use of beforeRouteLeave hooks here meets the requirements well:

/ / search results page beforeRouteLeave (to, from, next) {/ / vuex Storage Operation this.$store.commit ("updateRevert", {query: this.queryParam, page: this.pageParam, filter: this.filter,}); next (); / / continue the subsequent navigation parsing process}

When loading the page, check to see if there are saved parameters, and if so, perform the appropriate recovery operation:

/ / search results page mounted () {/ / determine whether there is a saved search parameter if (this.$store.state.revert) {const revert = this.$store.state.revert; this.queryParam = revert.query; this.pageParam = revert.page in vuex / / you can directly take out the entire object / / search operation} else {/ / there are no search parameters (because my search results are the same page as the home page, so it is possible to just open the home page normally)}}, this is all the content of the article "how to restore the page state when Vue routing returns". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.