<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>
