vue中使用keep-alive对组件进行缓存，关闭tag时清除缓存

**

场景: 后台管理系统中，列表进详情页，再次返回列表页，需要保存之前的搜索条件，这时需要使用keep-alive进行缓存，关闭tag标签时清除缓存。

**

1、router.js(对需要缓存的组件添加keepAlive)

{
      path: "/policy",
      name: "Policy",
      component: () => import("../views/pages/policy/index.vue"),
      meta: {
        keepAlive: true
      }  // true缓存 false不缓存
 }

2、App.vue

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

<script>
export default {
  name: "App",
  computed: {
    fullPath() {
      // console.log(this.$route.fullPath);
      return this.$route.fullPath;
    },
  },
  methods: {
    // 根据fullUrl清除keepAlive
    clearKeepAlive(fullUrl) {
      // console.log('bus触发要清除的keepAlive', fullUrl);
      this.$children.forEach((item) => {
        if (item.$vnode.data.key == fullUrl) {
          console.log(item.$vnode.data.key);
          this._myDestory(item);
        }
      });
    },
    // 封装清除某个组件的keepAlive状态,并销毁
    _myDestory(keepAliveComponent) {
      // 你可以根据自己的业务更改此处的判断逻辑，酌情决定是否摧毁本层缓存。
      if (
        keepAliveComponent.$vnode &&
        keepAliveComponent.$vnode.data.keepAlive
      ) {
        if (
          keepAliveComponent.$vnode.parent &&
          keepAliveComponent.$vnode.parent.componentInstance &&
          keepAliveComponent.$vnode.parent.componentInstance.cache
        ) {
          if (keepAliveComponent.$vnode.componentOptions) {
            var key =
              keepAliveComponent.$vnode.key == null
                ? keepAliveComponent.$vnode.componentOptions.Ctor.cid +
                  (keepAliveComponent.$vnode.componentOptions.tag
                    ? `::${keepAliveComponent.$vnode.componentOptions.tag}`
                    : "")
                : keepAliveComponent.$vnode.key;
            var cache =
              keepAliveComponent.$vnode.parent.componentInstance.cache;
            var keys = keepAliveComponent.$vnode.parent.componentInstance.keys;
            if (cache[key]) {
              if (keys.length) {
                var index = keys.indexOf(key);
                if (index > -1) {
                  keys.splice(index, 1);
                }
              }
              delete cache[key];
            }
          }
        }
      }
      keepAliveComponent.$destroy();
    },
  },
  mounted() {
    // 注册监听全局的clearKeepAlive方法,可在其他组件中触发此方法
    this.$bus.on("clearKeepAlive", this.clearKeepAlive);
  },
};
</script>

3、使用(在关闭tag的方法中)

closeTag(path) {
	this.$bus.emit("clearKeepAlive", path); // 清除缓存
}