A brief introduction to kepp-alive: the component is cached, the data is not updated, and the hook function of the component of the route wrapped by kepp-alive will not take effect.
Application scenario:
Suppose we have such a function that needs to be implemented. We enter the order list page from the home page, enter the order details page from the order list page, and then when we return from the details page to the list page, our list page does not refresh. Continue Keep the previous data. When entering the order list page from other pages, the data on the list page is refreshed as usual.
We add routing meta information to our order page, which is used to determine whether to cache the route
In our component of setting the project framework, we can judge whether to cache by getting the value of meta.
When we achieve this step, when we return from the details page to the order list page, the list page will not be refreshed. However, there will be a problem here. When we enter the order list page from other pages, the list page does not Refreshed, it definitely does not meet the requirements here, so we have to continue to improve and modify it here.
The approximate perfect logic is that we have to distinguish, in the current order list page, we judge whether we entered the details page, if it is a details page, then let the order page continue to cache, if we jump from the order page It is not a details page. At this time, we will modify the information in the meta of the order page to verify whether to cache or not to false
In the component configuration data of the order page, we add a post-routing guard, and use the guard to judge whether we enter the details page from the order page.
At this point, most of the logic has been implemented, but there are still bugs, which will be discussed in the next chapter