<keep-alive>
是 Vue 的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
1. 使用 router.meta 属性,预先定义需要缓存的组件
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
路由部分:
routes: [
{
path: '/test1',
component: test1,
meta: { keepAlive: true } // 需要缓存
},
{
path: '/test2',
component: test2,
meta: { keepAlive: false} // 不需要缓存
},
- test1 组件会被缓存,而 test2 组件不会被缓存。
2. 动态缓存 router-view 里面的部分组件页面
如果只想 router-view 里面某个、或某些页面组件被缓存,通常有如下两种办法:
- 使用
include/exclude
来实现 - 配合
router.meta
属性来实现
1). 使用 include/exclude 来实现,每个组件中需要加 name
来匹配
-
include
:只有匹配的组件会被缓存(支持字符串或正则表达) -
exclude
:任何匹配的组件都不会被缓存(支持字符串或正则表达)
// 只缓存 name 为 index 的组件
<keep-alive include="index">
<router-view/>
</keep-alive>
// 不缓存 name 为 index 的组件
<keep-alive exclude="index">
<router-view/>
</keep-alive>
// 只缓存 name 为 index 或 hello 的组件
<keep-alive include="index,hello">
<router-view/>
</keep-alive>
// 只缓存以 in 开头的组件(使用正则表达式,需使用 v-bind)
<keep-alive :include="/^in.*/">
<router-view/>
</keep-alive>
// 也可以动态绑定需要缓存的组件(tagsList:存储组件name值的数组,数组是js动态控制的)
<keep-alive :include="tagsList">
<router-view/>
</keep-alive>
2). 配合 router.meta 属性来实现
主要依赖 beforeRouteLeave
函数动态设置 meta.keepAlive
,示例代码如下:
export default {
name: 'hello',
//keep-alive钩子函数:组件被激活时调用
activated() {
console.log('首页被激活');
},
//keep-alive钩子函数:组件消失,被缓存时调用
deactivated() {
console.log('首页被缓存');
},
beforeRouteLeave(to, from, next) {
//设置下一个路由的meta(即首页)
to.meta.keepAlive = true; // 让首页缓存,即不刷新
next();
}
}
</script>