<keep-alive :include="cachedViews">
<router-view :key="key" />
</keep-alive>
当我们在项目中配置了keep-alive后,会发现页面关闭不能触发beforeDestroy。
首先我们来看看keep-alive是什么东西
keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁。
它的作用不言而喻
用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验。
看完如上你是不是就豁然开朗,知道为什么关闭页面不触发beforeDestroy了。总结如下:
不设置
keep-alive
,离开当前路由时,会调用beforeDestroy
和destroyed
来销毁。
当设置keep-alive
之后,不会直接调用这组销毁生命周期函数,而是在生命周期函数中新增两个:activated
和deactivated
。
1.第一次进入页面时,生命周期函数执行简单来说是这样的:
2.当退出时,会触发deactivated()
函数;
3.当再次进入该页面时,只会执行activated()
函数。
解决方法有2种
1.直接调用deactivated
deactivated() {
clearInterval(this.timer)
},
2.配合导航守卫,手动调用生命周期销毁函数
beforeRouteLeave (to, from, next) {
this.destroy();
next();
}
延伸下知识,看看keep-alive有哪些用法。
方式一:在App.vue中使用keep-alive标签,表示缓存所有页面
<div id="app">
<keep-alive>
<tar-bar></tar-bar>
<div class="container">
<left-menu></left-menu>
<Main />
</div>
</keep-alive>
</div>
方式二:按条件缓存,使用include,exclude判断是否缓存
// 1. 将缓存 name 为 cc 的组件,如果有多个,可用逗号分
<keep-alive include='cc'>
<router-view/>
</keep-alive>
// 2. 将不缓存 name 为 cc 的组件
<keep-alive exclude='cc'>
<router-view/>
</keep-alive>
// 3. 还可使用属性绑定动态判断
<keep-alive :include='includedComs'>
<router-view/>
</keep-alive>
方式三:在router目录下的index.js中,
第一步:使用meta:{keepAlive = true },表示需要缓存
const routes = [
{
path:'/',
component:Home,
meta:{
keepalive:true
}
},
{
path:'/login',
component:Login
},
{
path:'/edit',
component:Edit,
meta:{
istoken: true
}
},
{
path:'/home',
component:Home,
meta:{
keepalive:true
}
}
]
第二步:在App.vue中进行判断
本人用的是第二种。