vue keep-alive的作用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012878818/article/details/78550841

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

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

结合router，缓存部分页面

使用$route.meta的keepAlive属性：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

需要在router中设置router的元信息meta：

思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：

• 首页是A页面
• B页面跳转到A，A页面需要缓存
• C页面跳转到A，A页面不需要被缓存

路由配置：

{
    path: '/a',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被缓存
     }
}

 path: '/b',
    name: 'B',
    component: B,
    meta: {
        keepAlive: false // 需要被缓存
    },
 path: '/c',
    name: 'c',
    component: c,
    meta: {
        keepAlive: false // 需要被缓存
    }

}

A页面的配置：
beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;  //  离开时，让不缓存，即刷新
      next();
    },

B页面的配置：
beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      if(to.path=='/a'){
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新
      }
      next();
    },

C页面的配置：
beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      if(to.path=='/a'){
        to.meta.keepAlive = false;  // C 跳转到 A 时，让 A不缓存，即刷新
      }
      next();
    },


使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。