vue内置组件keep-alive的使用

场景一：所有页面都缓存

所有页面都需要缓存时，直接使用keep-alive组件即可

场景二：部分页面缓存

• 方式一：在需要使用keep-alive的路由中配置meta.keepAlive为true，渲染时根据keepAlive使用不同的router-view

  <template>
    <div>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </template>
  1
  2
  3
  4
  5
  6
  7
  8

• 方式二：将需要使用keep-alive的组件名称配置到keepAlive中即可

  <template>
    <keep-alive :include="keepAlive">
      <router-view></router-view>
    </keep-alive>
  </template>
  <script>
    export default {
      name: 'Layout',
      data() {
        return {
          keepAlive: ['componentA', 'componentB']
        }
      }
    }
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

场景三：部分页面动态缓存

举例：从列表页进入详情页再回到列表页时，列表需要缓存；从其他页面进入列表页时，列表页不需要缓存

实现思路：

• 在路由配置中添加meta

  export default {
    path: '/list',
    component: () => import('../list.vue'),
    meta: {
      keepAlive: true,
      componentName: 'List',
      fromPath: ['/detail']
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 路由更新时，如果不是从详情页跳转到列表页，就清除列表页的缓存

  <template>
    <keep-alive :include="keepAlive">
      <router-view></router-view>
    </keep-alive>
  </template>
  <script>
    export default {
      name: 'Layout',
      data() {
        return {
          // 需要缓存的组件名称
          keepAlive: []
        }
      },
      beforeRouteUupdate(to, from, next) {
        const { keepAlive, fromPath, componentName } = to.meta;
        if (keepAlive) {
          // 如果不是从详情页跳转到列表页，就清除列表页的缓存
          if (Array.isArray(fromPath) && fromPath.every(item => item != from.path)) {
            this.keepAlive = this.keepAlive.filter(item => item != componentName);
          }
          setTimeout(() => this.checkRouteKeep(to), 100);
        }
        next();
      },
      created() {
        this.checkRouteKeep(this.$route);
      },
      methods: {
        checkRouteKeep(route) {
          const { keepAlive, componentName } = route.meta;
          if (keepAlive && this.keepAlive.every(item => item != componentName)) {
            this.keepAlive.push(componentName);
          }
        }
      }
    }
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38