Vue—keepAlive 动态管理页面缓存

简介

<keep-alive>是Vue的内置组件，当他包裹组件时，会对组件进行缓存，不去销毁组件。

首次进入页面时，会触发mounted和activated钩子，当页面被缓存下来后，进入页面只会触发activated钩子，离开页面会触发deactivated，不会触发destroyed。

使用

参数

参数	值	描述
include	字符串或正则表达式	只有name匹配的组件会被缓存
exclude	字符串或正则表达式	name匹配的组件不会被缓存

// 将缓存 name 为 home 的组件
<keep-alive include='home'>
  <router-view/>
</keep-alive>

// 使用正则表达式
<keep-alive :include='/home|index/'>
  <router-view/>
</keep-alive>

通过路由中的 meta 属性控制

通过在路由中的meta添加keepAlive属性为true，标识当前页面需要进行缓存。

{
      path: '/shop',
      name: 'shop',
      component: () => import('./views/shop.vue'),
      meta: {
        keepAlive: true //此组件需要被缓存
      }
    },

结合v-if进行使用

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

现在我们已经可以缓存页面了，但是在开发过程中，如下场景：

• list：商品列表页。
• shop：商品页（被缓存）。
• order：购买页。

当从列表页跳到商品页时，商品页不需要缓存，只有从购买页跳到商品页时，才需要缓存。

为了满足这种同一个页面有时需要缓存，有时不需要的场景，需要使用路由守卫beforeRouteLeave来实现，根据将要访问的页面判断是否要清除缓存。

beforeRouteLeave(to, from, next) {
    // 回到商品列表不缓存
    if(to.name === 'list'){
      // 清除缓存
      this.$destroy();
    }
    next();
  }