Table of contents
Unique lifecycle hooks activated and deactivated for routing components
Cache Routing Components
Normally, when switching routing components, the routing components that are not displayed will be destroyed. In order to keep the routing components that are not displayed mounted and not destroyed, cache routing components are used.
If you want a component not to be destroyed when it is not displayed after switching, write its <router-view></router-view> in the <keep-alive></keep-alive> tag. In this way, when switching routes, the previous route will not be destroyed.
<keep-alive>
<router-view></router-view>
</keep-alive>The default of <keep-alive> is that all components written in <keep-alive> will not be destroyed after switching. The attribute include = 'News' indicates that the component is named News and is wrapped by keep-alive, and will not be destroyed after switching.
Question: If multiple routes are to be displayed in <router-view></router-view>, but if they are cached, only a few of them are cached, and not all routes are cached. The writing method is:
<keep-alive :include= '["News","Message"]'>
<router-view></router-view>
</keep-alive>
Analysis: Write it in the form of an array , and write all the route names that need to be cached into the array.
Note: If the route is cached in this way, the destruction function of the route will be prevented from executing (beforeDestroy and destroyed), and it cannot be destroyed.
Unique lifecycle hooks activated and deactivated for routing components
When writing cached routes, using activated and deactivated can not only ensure that the route will be cached, but also ensure that the route will be activated and deactivated.
activated is executed when the route is activated, and deactivated is executed when the route is deactivated.
eg：
