keep-alive Cache
Without caching, each click navigation, content area will create a component that will go through the entire life cycle of each click, it will create a component, more waste of performance, this time, we will be able to take into account whether clicked components have been created to cache, when you click components have been visited again, this time, it will acquire the component from the cache, rather than re-create, which use keep-alive.
A keep-alive tag package component assembly tab
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
<component :is="currentComponent"></component>
</keep-alive>
Vue-router applications in
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
<router-view></router-view>
</keep-alive>
include the definition of the cache whitelist, keep-alive will be a cache hit assembly; the exclude defined blacklist cache, hit the assembly will not be cached; max define upper buffer assembly, use exceeds the upper limit of the LRU cache replacement policy data.
Activated、deactivated
keep-alive corresponding to two life cycle : activated, deactivated
activated(){
console.log ( " active state ");
}
deactivated(){
console.log ( " buffer state ")
}
When reading from the cache a time component, when a component is active,
When reading from the cache b during assembly, A components in the buffer status, case b components in the active state,
use:
When a browser novel components to a location, then I switched to b components, then use a buffer state assembly function to record the location (),
when I switched again to a component, to save the state function with active position
include、exclude
include attribute indicates only the name attribute is bookLists , bookLists component is cached, the other components are not cached
exclude attribute indicates addition name attribute indexLists not cached components, other components are cached
<keep-alive include = "bookLists , bookLists ">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
<router-view></router-view>
</keep-alive>
Note: name is the name of the component, rather than routing name
As a vue file
<template>...</template>
<script>
export default {
name：”bookLists”,
data:(){
return {}
}
}
</script>
Use meta property
In router.js set the property route
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
meta: {
keepAlive: true // components to be cached
}
},
{
path: '/vuexTry',
component: () => import('./views/vuexTry.vue'),
meta: {
keepAlive: false // does not need to be cached components
}
}
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<! - here it will be cached components ->
</keep-alive>