Definition:
When dynamic components are wrapped, inactive component instances are cached rather than destroyed
Life cycle:
Activated: Triggers when a keepalive component is rendered again
Deactivated: Triggered when a Keepalive component is destroyed
parameter
Include components (can be strings, arrays, and regular expressions; only matching components are cached)
Exclude components (strings, arrays, and regular expressions that match are not cached)
Max Maximum number of cache components (characters or numbers can be used to control the number of cache components)
<keep-alive include="list,table"> <component></component> </keep-alive> <keep-alive exclude="list,table"> <component></component> </keep-alive> <! -- Exclude takes precedence over include if both include and exclude are used. The following example caches only a component --> <keep-alive include="list,exclude" exclude="exclude"> <component></component> </keep-alive> <! If the number of cached components exceeds the Max value of 10, The first cached component will be removed --> <keep-alive Max ="10"> <component></component> </keep-alive> <keep-alive include="table"> <router-view> <! -- </router-view> </keep-alive> <! --index.vue --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="! $route.meta.keepAlive"></router-view> //... router.js export default new Router({ routes: [ { path: '/list', name: 'list', component: list, meta: { keepAlive: False // Cache not required}}, {path: '/table', name: 'table', Component: table, meta: {keepAlive: true // Cache required}}]})Copy the code