keep-alive是一个抽象组件:他自身不会渲染一个DOM元素,也不会出现在父组件链中,使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
keep-alive的属性:
include:包含,定义缓存白名单,该属性里定义的组件会被缓存
exclude:定义缓存黑名单,该属性定义的组件将不会被缓存
1.第一种写法
<keep-alive include="artice,user" exclude="type">
<router-view></router-view>
</keep-alive>
//组件里定义name
export default{
//定义
name:"user"
}
//也可以动态写法 :
<keep-alive :include="['art','user']" :exclude="['type']">
<router-view></router-view>
</keep-alive>
2.第二种写法
<keep-alive>
//需要缓存的组件
//v-if属性加到keep-alive中不起作用,她是一个抽象组件,自身不会渲染一个DOM元素,也不会出现在父组件链中
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不需要缓存的组件
<router-view v-if="!$route.meta.keepAlive"></router-view>
//在router路由对象中,在需要缓存的路由中定义,true为缓存,false为不缓存
meta:{
keepAlive:false/true
}
``
keep-alive的钩子函数:activated、deactivated
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序
beforeCreate-->created-->beforeMount-->mounted-->activated-->beforeUpdate-->updated
退出时触发:deactivated
当再次进入(前进或后退)是,只触发activated