keep-alive 组件是vue的一个内置组件,作用是当路由或者组件切换时,他会缓存住包裹在其中的组件或者页面的状态,而不是销毁掉,这样下次重新进入被包裹的路由页面时不会重新渲染dom二是从缓存中读取。
一般情况下会结合路由配置全局监控调整
例如可以在 app.vue中配置如下代码:
<div id="app-warp" class="app-warp">
<keep-alive>
<router-view v-if="$route.meta.keepAlive && isRouterAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive && isRouterAlive" />
</div>
这样可以针对要进入的路由的配置去决定是否使用keep-alive进行缓存整个路由页面
当页面路由配置中keepAlive为true时会使用 包裹的路由进行页面的缓存,否则使用未缓存的路由页面
路由配置如下:
{
path: '/路径',
name: '名称',
component: () => import('@/views/组件地址'),
meta: {
keepAlive: false,
title: '标题',
},
},
使用keep-alive时需要注意,keep-alive提供了两个新的生命周期钩子函数:
activated:这个函数是用来替代created函数,当组件第一次渲染时或者每次keep-alive重新激活时都会被调用,要注意的是,组件第一次渲染时生命周期执行顺序是created-> mounted-> activated,之后keep-alive重新激活不在执行 created与mounted,只执行 activated
deactivated:当每次离开组件时这个函数会被调用,需要注意的是,如果有需要离开路由时进行相应的逻辑,正常的话会写在beforeRouteLeave函数中,但实际项目中会遇到beforeRouteLeave无法执行,建议在deactivated也进行一些判断
activated() {
// 读取上次计时时间,没有则至 0
this.scanTime = sessionStorage.getItem(this.scantitle) ? Number(sessionStorage.getItem(this.scantitle)) : 0
console.log('activated-浏览时间:', this.scanTime);
if (!this.scanTimeCount) {
this.timer()
}
},
deactivated() {
console.log('deactivated-浏览时间:', this.scanTime);
this.clear()
// 离开页面记住计时时间
this.setScanTime()
},
beforeRouteLeave (to, from, next) {
// 清除循环计时
this.clear()
// 离开页面记住计时时间
this.setScanTime()
next(vm => {
console.log('beforeRouteLeave-scanTime:', vm.scanTime);
});
}
如有错误或不全欢迎评论区指正