Vue: keep-alive的使用
作用:
组件切换时保持组件状态不被销毁
属性:
include——包括:值为字符串或正则表达式或数组;指定的组件被缓存
exclude——不包括:值为字符串或正则表达式或数组;指定的组件不被缓存
exclude优先级高于include
用法:
<keep-alive include="home,about" >
<router-view></router-view>
</keep-alive>
<keep-alive exclude="home,about" >
<router-view></router-view>
</keep-alive>
或者
{
path: '/',
name : "home',
meta:{ keepAlive:true }
component: Home
}
或者keep-alive包裹动态组件
<keep-alive include="home" exclude="about">
<component :is="whichComponent"></component>
</keep-alive>
缓存之后组件中事件的执行顺序
//初始进入和离开
created ---> mounted ---> activated --> deactivated
//后续进入和离开
activated --> deactivated