1 介绍
<keep-alive>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>
相似,<keep-alive>
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
例子1
<keep-alive :include="['basicInfo', 'infoWarning' ,'dynamic']">
<router-view />
</keep-alive>
prop:
* include: 字符串或正则表达式。只有匹配的组件会被缓存。
* exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
例子2
<keep-alive include="bookLists,bookLists">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
<router-view></router-view>
</keep-alive>
prop:
* include属性表示只有name属性为bookLists,bookLists的组件会被缓存,(注意是组件的名字,不是路由的名字)其它组件不会被缓存
* exclude属性表示除了name属性为indexLists的组件不会被缓存,其它组件都会被缓存
2 利用meta属性
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false, //不需要被缓存的组件
xxx:xxx //可以自定义参数,通过 this.$router.meta.xxx获取
}
]
<keep-alive>
<router-view v-if="this.$route.meat.keepAlive"></router-view>
<!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->