This article is an opportunity outline:
- Existing requirements
- Advantages and disadvantages of each solution
- Related issues Extension
- Keep-alive use of the detailed
Existing RequirementsThere are many list data presentation pages in each project, and often include some filter criteria and pagination.
Also, clicking on a column in the table requires a route to jump into the details/Add/edit page. A good user experience is that when you return from the details/Add/edit page, you want the list page to retain the filter criteria and page numbers for the last time you left. However, under normal circumstances, the instance has been destroyed after a route jump.Optional Solutions
1. Retain Status data:
Take advantage of state storage status, such as filter branding, time range, paging. stored in State (VUEX) when the route jumps to details/Add/edit, and resets if you jump to another route. Cons: There are differences in filter criteria for each list, as well as read status (cumbersome) when each list instance is created, but you can also use the computed property to return the status.
2. Keep the page, keep the instance:
Keep-alive, the instance is not destroyed when the route jumps.keep-aliveprinciple of Use:1. When a dynamic component is wrapped, the component instance is cached instead of the two hooks called activated and deactivated when the 2.keep-alive is destroyed in the routing switchHow to use:
- Outside the Router-view, the affected range is the Router-view inside the route jump.
- Vue 2.1. Version 0 new include and exclude properties to selectively cache which components (feel narrower to use, see for yourself)
conditions of Use:
- Non-functional components
What is a functional component? Create template content in the render function (generally we do not use, so this condition basically does not affect)use need to pay attention to the problem:1. Use in transition (for specific reasons not clear)
2. Once the root routing component is used outside the keep-alive, all routing jumps inside will be affected
- For list pages that need to be persisted, perform the actions you want to update in the activated hooks, such as updating the list data:
Scene requirements: mounted or created hook inside get list data route to go back after leaving, mounted or created hooks will not be called, but I need to update the data. WORKAROUND: 1. Define the Firstin property and initialize it to true to indicate whether to enter the route for the first time. and set the value to false the first time the activated hook is executed. 2. Transfer the data initialization operation in the mounted or created hooks to the activated hook.
- For other pages that do not need to be kept, add the deactivated hook directly and destroy the instance.
3. Whether the menu-level jumps need to be re-rendered note that each conditional branch must perform next, otherwise the instance is destroyed and the page is not re-rendered.Other questions:1. Activated and deactivated hooks for non-keep-alive surrounded routing components will not be triggered. As an example:
Assume that the route has a keep-alive parcel with the node:
- AC Two components can be triggered activated and deactivated hooks
- BD is not triggered by activated and deactivated hooks because the BD component is not a routing component
- F is also not triggered, even if f is a routing component, but if Keep-alive has a router-view in the Package e component, then f can also be triggered
SummarizePros: 1. Simple rough 2. Some drawbacks of the actual scenario are more divorced than the computed attribute: 1. For routes that do not need to be cached, the Destroy method needs to be called to destroy.
Vue.js+vue-router+webpack keep-alive Usage
