Vue keep-alive详解

是 Vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

1. 使用 router.meta 属性，预先定义需要缓存的组件

    >

路由部分：

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 的组件

  


// 不缓存 name 为 index 的组件

  


// 只缓存 name 为 index 或 hello 的组件

  


// 只缓存以 in 开头的组件（使用正则表达式，需使用 v-bind）

  


// 也可以动态绑定需要缓存的组件（tagsList：存储组件name值的数组，数组是js动态控制的）

  

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();
  }
}