Demand scenarios
Click the search content on the home page to jump to the details page, and go back to the home page to keep the search results.
Solution:
Routing parameters; Routing guard
Requirements describe
When developing the front end with VUE, I encountered a scenario where I did some data search on the home page, clicked on the search results to enter the details page, and then returned to the home page after browsing the details page. But then the previous search history and page turns disappear, and the user experience is not good. Therefore, you need to restore the page parameter status before the jump after the return.
Of course, if conditions allow, the simplest way is to click on the search results to use a new page to open (such as Baidu).
However, the current requirement is a complete vUE development project, not to open the off-site address, and the details are not much, using a new page is not appropriate (poor performance and easy to create a large number of tabs).
Here are two solutions that are easy to implement:
- Solution 1: Store the search parameters in the route parameter (rout.query) and search according to the parameters when loading the page
Advantages: refresh does not affect; Simple implementation disadvantages: parameters can only be the base type, the length is limited; The path looks ugly; Only valid for browser return, manual jump back to the home page does not work
- Option 2: Use routing guard hooks to store page parameters locally before leaving the page (vuex, Local Storage, etc.)
Advantages: Parameter type length is relatively free; The path looks clean and beautiful; Disadvantages: Additional data storage operations are required, and page refreshing will not work if you use Store mode or VUex
Solution 1: Route parameters
If you don’t have many parameters, and don’t mind having a bunch of parameters after the path (shedding tears of ocd), you can put the parameters directly in the routing path
After clicking search, use vue Router to jump and pass parameters:
$router. Push ({name: "Index", query: {... This.queryparam}, // expand the object to key values}); },Note the difference between the query and params parameters: the query parameter will start with? K1 =v1&k2=v2 form continued after the path, can be directly seen in the address bar, so it is not affected by the page jump, refresh; The latter only works the first time you jump to the corresponding page, and refreshes the page again.
So use the Query pass parameter here. Manually writing the parameters in the path format is fine, but it is significantly less readable and extensible, and 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 the basic type, which is not well supported by arrays or objects.
If the parameters are simple, you can expand the corresponding object as the parameter (make sure that there is no same key in different objects), but when read in the search results page that you jump to, you can only get the property one by one.
$route.query () {$route = $route.query (); $route = $route.query (); let keyword = this.$route.query.keyword; / /... Else {// there is no search parameter (because my search result is the same as the home page, so it is possible to open the home page)}},Solution 2: Local storage parameters
Since the parameters I want to store are three objects, and it is too inconvenient to expand into key values, I use this scheme.
Since vuEX was originally used in the project, it exists in VUEX by the way, anywhere according to the actual situation.
The disadvantage of VUEX is that it is wiped out once refreshed, which has little impact on the function of optimizing the nature of the experience of search results; If there is a corresponding requirement, it can be stored in the Local storage.
Because there are many ways to change parameters in my requirements, it is too cumbersome to store parameters when changing, and it is prone to errors or omissions. Therefore, this option is to store the required parameters uniformly before the route jump.
The Vue Router provides the route navigation guard API series to implement the corresponding functions, including global front/parsing/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, Mounted.
Complete navigation parsing process:
1. Navigation is triggered.
2. Call the beforeRouteLeave guard in the deactivated component.
3. Call the global beforeEach guard.
4. Call the beforeRouteUpdate guard (2.2+) in the reused component.
5. Call beforeEnter in the route configuration.
6. Parse the asynchronous routing component.
7. Call beforeRouteEnter in the activated component.
Call the global beforeResolve guard (2.5+).
9. Navigation is confirmed.
20. Call the global afterEach hook.
11. Trigger the DOM update.
12. Call the callback function passed to next from the beforeRouteEnter guard. The created component instance is passed as an argument to the callback function.
Obviously, the beforeRouteLeave hook fits the bill perfectly:
BeforeRouteLeave (to, from, next) {keep this.store.commit ("updateRevert", {query: this.queryParam, page: this.pageParam, filter: this.filter, }); next(); // Continue the navigation parsing process},When loading the page, check whether there are saved parameters, if there are, perform corresponding recovery operations:
Mounted () {// If (this.$store.state.revert) {const revert = this.$store.state.revert; this.queryParam = revert.query; this.pageParam = revert.page; / / can be directly removed the entire object / / search operations} else {/ / no search parameters (because I am the search results page and home page is the same, so it's possible just normal open the home page)}},In order to help you to better review the key knowledge, more efficient preparation for the interview, the “Vue Interview questions summary” electronic draft document.
Vue interview questions
1. What are the two core elements of vue.js?
2. What is the principle of vUE bidirectional binding?
3. What are the vue lifecycle hook functions?
4. What’s the difference between V-if and V-show?
5. Vue commonly used modifiers
6.nextTick
7. What is the VUE lifecycle
8. Data response (data hijacking)
9. Virtual DOM implementation
10. Advantages of Proxy over defineProperty
11.vuex
12. Functions of key values in vue
13. Why must data in Vue be a function?
14. Priority of V-for and V-IF
15. Name at least four vue instructions and how to use them
16. Vue neutron component calls parent component methods
17. Parent component calls child component methods in vue
18. Pass values between vue page level components
19. Talk about the dynamic components of VUE.
20. Function of keep-alive built-in components
conclusion
These are two ways to share the state of the page. Many of these choices are relevant to the actual needs at the time, and therefore may not be the best solution in all scenarios. For your specific needs, the solution may be inadequate, or there is an easier way, please leave a comment.