bus使用清除keepalive缓存

<template>
  <div id="app">
    <!-- <keep-alive>
      <router-view v-if="$route.meta.noCache"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.noCache"></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',
  provide() {
    return {
      reload: this.reload
    }
  },
  computed: {
    fullPath() {
      // console.log(this.$route.fullPath);
      return this.$route.fullPath
    }
  },
  mounted() {
    // 注册监听全局的clearKeepAlive方法,可在其他组件中触发此方法
    this.$bus.$on('clearKeepAlive', this.clearKeepAlive)

    // 使用
    // this.$bus.emit("clearKeepAlive", path); // 清除缓存
  },
  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()
    },
    reload() {
      this.ifRouterAlive = false
      this.$nextTick(() => {
        this.ifRouterAlive = true
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
----------优化后  

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

  computed: {
    fullPath() { 
      return this.$route.path;
    },}
  mounted() {
    // this.initWindow();
    // 注册监听全局的clearKeepAlive方法,可在其他组件中触发此方法
    this.$bus.$on("clearKeepAlive", this.clearKeepAlive);
    // 使用清除缓存
    // this.$bus.$emit("clearKeepAlive", path);
  },

       //获取实例进行清除
    clearKeepAlive(fullUrl) {
      if (this.$children && this.$children.length > 0) {
        this.$children.forEach((item) => {
          const { $vnode } = item
          if ($vnode && $vnode.data.key === fullUrl && $vnode.data.keepAlive) {
            this._myDestroy(item)
          }
        })
      }
    },
    _myDestroy(keepAliveComponent) {
      const { $vnode } = keepAliveComponent
      if ($vnode && $vnode.data.keepAlive && $vnode.parent && $vnode.parent.componentInstance) {
        const { parent } = $vnode
        const { key } = $vnode
        const { cache, keys } = parent.componentInstance
        if (cache && keys && cache[key] !== undefined) {
          for (const index of keys.entries()) {
            if (index[1] === key) {
              keys.splice(index[0], 1)
            }
          }
          delete cache[key]
          keepAliveComponent.$destroy()
        }
      }
    },

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141