Vue routing returns the operation method of restoring page status

Route parameters, route navigation guards: retain search results when the page returns

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

Solution: Routing parameters; Routing guards

Requirement Description

When using Vue to develop the front end, I encountered a scenario: searching for some data on the home page, clicking on the search results to enter the details page, and then returning to the home page after browsing the details page. But at this time, the previous search history and page turning will disappear, which will result in a poor user experience. Therefore, it is necessary to restore the page parameter status before the jump after returning.

Of course, if conditions permit, the easiest way is to click on the search results and open them in a new page (such as Baidu does). However, the current requirement is a complete Vue development project, not opening an external address, and the details are not much, so it is not appropriate to use a new page (the performance is poor and it is easy to create a huge number of tabs).

Here are two solutions that are easier to implement:

• Solution 1: Store the search parameters in the route parameters (route.query) and search based on the parameters when loading the page

Advantages: no impact on refresh; simple implementation

Disadvantages: Parameters can only be basic types and have limited length; the path looks ugly; only valid for browser returns, manual jump back to the homepage does not work

• Solution 2: Use the route guard hook to store page parameters locally before leaving the page (vuex, Local Storage, etc.)

Advantages: The parameter type and length are relatively free; the path looks refreshing and beautiful; it is effective for returning to the homepage in any way

Disadvantages: Additional data storage operations are required. If store mode or vuex is used, refreshing the page will fail.

Solution 1: Routing parameters

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

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 into keys and values ​​});
},

Here we should pay attention to the difference between query parameter passing and params parameter passing: the parameters of the former will be continued after the path in the form of ?k1=v1&k2=v2 , and can be seen directly in the address bar, so it is not affected by page jumps or refreshes; the latter only works when jumping to the corresponding page for the first time, and will disappear when refreshing. Therefore, query is used here to pass parameters. It is also possible to manually write the parameters in the path according to the format, but the readability and scalability are obviously worse. It is not recommended unless there are only one or two simple parameters.

In addition, since this parameter is to be placed in the path, it can only be a key-value pair of basic types, and arrays or objects cannot be well supported. If the parameters are simple, you can expand the corresponding objects as parameters (you need to ensure that there are no duplicate keys in different objects), but when reading in the search result page that you jump to, you can only obtain the attributes one by one.

// Search results page mounted() {
  // Distinguish between $route and $router
  if (this.$route.query.type) {
    let type = this.$route.query.type;
    let keyword = this.$route.query.keyword;
    // ...get each parameter one by one//perform the search operation} else {
    // No search parameters (because my search results and homepage are on the same page, so it is possible that I just open the homepage normally)
  }
},

Solution 2: Local storage parameters

Since the parameters I want to store are three objects, it is too inconvenient to expand them into key values, so I used this solution. Since vuex is also used in the project, it is stored in vuex. It can be stored anywhere according to the actual situation. The disadvantage of vuex is that it disappears once it is refreshed, which has little impact on search results and other functions that optimize the experience. If there is a corresponding demand, it can be stored in local storage.

Because there are many ways to change parameters in my needs, it is too troublesome to store parameters when changing, and it is easy to make mistakes or omissions. Therefore, we choose to store the required parameters uniformly before routing jump.

Vue Router provides a series of routing navigation guard APIs to implement corresponding functions, including global pre/parse/post guards, routing configuration guards, component guards, etc. 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:

1. Navigation is triggered.
2. Call beforeRouteLeave guard in the deactivated component.
3. Calls the global beforeEach guard.
4. Call beforeRouteUpdate guards in reused components (2.2+).
5. Call beforeEnter in the route configuration.
6. Resolve asynchronous routing components.
7. Call beforeRouteEnter in the activated component.
8. Calls the global beforeResolve guard (2.5+).
9. Navigation confirmed.
10. Call the global afterEach hook.
11. Triggers a DOM update.
12. Call the callback function passed to next in the beforeRouteEnter guard, and the created component instance will be passed in as a parameter of the callback function.

Obviously, the beforeRouteLeave hook can meet the requirements well here:

// 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 a page, check if there are any saved parameters, and if so, restore them accordingly:

// Search results page mounted() {
  // Check if there are any saved search parameters in vuex if (this.$store.state.revert) {
    const revert = this.$store.state.revert;
    this.queryParam = revert.query;
    this.pageParam = revert.page; // You can directly retrieve the entire object // Search operation } else {
    // No search parameters (because my search results and homepage are on the same page, so it is possible that I just open the homepage normally)
  }
},

Conclusion & References

The above are two ways to save page status. Many of these choices are related to the actual needs at the time, so they may not be the best solution in all scenarios. For your specific needs, the solutions in this article may be insufficient, or there may be simpler methods; the article explains the actual needs and basis of each step as much as possible for reference. For any omissions or deficiencies in the article, please feel free to discuss and correct them in the comments.

Programmatic navigation

Route Navigation Guard

This is the end of this article about Vue routing return and restore page status. For more relevant Vue routing page status content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!