路由缓存修改

src/components/V/v-keep-alive.vue

@@ -0,0 +1,94 @@
+<script>
+/**通过URL 缓存页面
+ * 日期:2020/8/4
+*/
+var cache = Object.create(null);
+var keys = [];
+function remove(keys, key) {
+  if (keys && key) {
+    var index = keys.indexOf(key);
+    if (index != -1) {
+      keys.splice(index, 1);
+    }
+  }
+}
+/**
+ * 修剪缓存
+ */
+function pruneCache(keepAliveInstance, filter) {
+  const { cache, keys, _vnode } = keepAliveInstance;
+  for (const key in cache) {
+    const cachedNode = cache[key];
+    if (cachedNode) {
+      if (!filter(key)) {
+        pruneCacheEntry(cache, key, keys, _vnode);
+      }
+    }
+  }
+  console.log("页面缓存数量：" + keys.length);
+}
+/**
+ * 修剪缓存入口
+ */
+function pruneCacheEntry(cache, key, keys, current) {
+  const cached = cache[key];
+  // 主动执行某个组件的destory，触发destroy钩子，达到销毁目的，然后移除缓存中的key-value
+  cached && cached.componentInstance.$destroy();
+  cache[key] = null;
+  remove(keys, key);
+}
+
+export default {
+  name: "v-keep-alive",
+
+  // 抽象组件
+  abstract: true,
+  props: {
+    keyArray: []
+  },
+  created() {
+    // 组件创建时创建缓存对象
+    this.cache = cache;
+    this.keys = keys;
+  },
+
+  destroyed() {
+    // 销毁时清除所有缓存
+    // for (const key in this.cache) {
+    //   pruneCacheEntry(this.cache, key, this.keys);
+    // }
+  },
+
+  mounted() {
+    this.$watch("keyArray", val => {
+      //销毁不在key数组的对象
+      pruneCache(this, name => val.some(v => v == name));
+    });
+  },
+
+  render() {
+    const slot = this.$slots.default;
+    const vnode = slot[0];
+    const componentOptions = vnode && vnode.componentOptions;
+    this.$vnode.componentOptions.Ctor.options.abstract = true;
+    if (componentOptions) {
+      const { cache, keys } = this;
+      const key =
+        vnode.key.indexOf("__transition") == 0 ? vnode.data.key : vnode.key;
+
+      if (cache[key]) {
+        vnode.componentInstance = cache[key].componentInstance;
+        remove(keys, key);
+        keys.push(key);
+        console.log("页面缓存数量：" + keys.length);
+      } else {
+        cache[key] = vnode;
+        keys.push(key);
+        console.log("页面缓存数量：" + keys.length);
+      }
+      vnode.data.keepAlive = true;
+    }
+    return vnode || (slot && slot[0]);
+  }
+};
+</script>

src/layout/components/AppMain.vue

@@ -1,25 +1,29 @@
 <template>
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
-      <keep-alive :include="cachedViews">
+      <v-keep-alive :keyArray="cachedViews">
         <router-view :key="key" />
-      </keep-alive>
+      </v-keep-alive>
     </transition>
   </section>
 </template>
 
 <script>
+import vKeepAlive from "../../components/V/v-keep-alive";
 export default {
-  name: 'AppMain',
+  name: "AppMain",
+  components: {
+    vKeepAlive
+  },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
+      return this.$route.path;
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -31,7 +35,7 @@ export default {
   overflow: hidden;
 }
 
-.fixed-header+.app-main {
+.fixed-header + .app-main {
   padding-top: 50px;
 }
 
@@ -41,7 +45,7 @@ export default {
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header+.app-main {
+  .fixed-header + .app-main {
     padding-top: 84px;
   }
 }

src/store/modules/tagsView.js

@@ -13,9 +13,9 @@ const mutations = {
     )
   },
   ADD_CACHED_VIEW: (state, view) => {
-    if (state.cachedViews.includes(view.name)) return
+    if (state.cachedViews.includes(view.path)) return
     if (!view.meta.noCache) {
-      state.cachedViews.push(view.name)
+      state.cachedViews.push(view.path)
     }
   },
 
@@ -28,7 +28,7 @@ const mutations = {
     }
   },
   DEL_CACHED_VIEW: (state, view) => {
-    const index = state.cachedViews.indexOf(view.name)
+    const index = state.cachedViews.indexOf(view.path)
     index > -1 && state.cachedViews.splice(index, 1)
   },
 
@@ -38,7 +38,7 @@ const mutations = {
     })
   },
   DEL_OTHERS_CACHED_VIEWS: (state, view) => {
-    const index = state.cachedViews.indexOf(view.name)
+    const index = state.cachedViews.indexOf(view.path)
     if (index > -1) {
       state.cachedViews = state.cachedViews.slice(index, index + 1)
     } else {