vue的keep-alive组件清除缓存

原创地址：https://blog.csdn.net/qq_15964039/article/details/104008770

应用场景：从列表跳转到详情页，再次返回列表页时要记住之前列表页的页码、搜索关键词等，采用keepa-live缓存组件。 在路由文件配置meta.keepAlive:

文件路径： router/index.js

  {
    path: '/List',
    name: 'list',
    meta: { keepAlive: true }, // 添加路由元信息。
    component: List
  }

文件路径：App.vue

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

文件路径：List.vue 

beforeRouteLeave(to, from, next) {
    //  /Detail 为下一级路由
    if (to.path == "/Detail") {
      from.meta.keepAlive = true;
    } else {
      let vnode = this.$vnode;
      let parentVnode = vnode && vnode.parent;
      if (
        parentVnode &&
        parentVnode.componentInstance &&
        parentVnode.componentInstance.cache
      ) {
        var key =
          vnode.key == null
            ? vnode.componentOptions.Ctor.cid +
              (vnode.componentOptions.tag
                ? `::${vnode.componentOptions.tag}`
                : "")
            : vnode.key;
        var cache = parentVnode.componentInstance.cache;
        var keys = parentVnode.componentInstance.keys;

        if (cache[key]) {
          this.$destroy();
          // remove key
          if (keys.length) {
            var index = keys.indexOf(key);
            if (index > -1) {
              keys.splice(index, 1);
            }
          }

          cache[key] = null;
        }
      }
    }
    next();
  },

此文章非原创，只用于笔记。