Vue keep-alive和activated的用法

<keep-alive> 是 Vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染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>