使用完整URL做为区分页签的标识

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

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

src/layout/components/AppMain.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
-      <v-keep-alive :keyArray="cachedViews">
+      <v-keep-alive :keyarray="cachedViews">
         <router-view :key="key" />
       </v-keep-alive>
     </transition>
@@ -9,21 +9,22 @@
 </template>
 
 <script>
-import vKeepAlive from "../../components/V/v-keep-alive";
+import vKeepAlive from '../../components/V/v-keep-alive'
 export default {
-  name: "AppMain",
+  name: 'AppMain',
   components: {
     vKeepAlive
   },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews;
+      console.log('123', this.$store.state.tagsView.cachedViews)
+      return this.$store.state.tagsView.cachedViews
     },
     key() {
-      return this.$route.path;
+      return this.$route.fullPath
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>

src/layout/components/TagsView/index.vue

@@ -4,7 +4,7 @@
       <router-link
         v-for="tag in visitedViews"
         ref="tag"
-        :key="tag.path"
+        :key="tag.fullPath"
         :class="isActive(tag)?'active':''"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
         tag="span"
@@ -67,7 +67,7 @@ export default {
   },
   methods: {
     isActive(route) {
-      return route.path === this.$route.path
+      return route.fullPath === this.$route.fullPath
     },
     isAffix(tag) {
       return tag.meta && tag.meta.affix

src/store/modules/tagsView.js

@@ -5,7 +5,10 @@ const state = {
 
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
-    if (state.visitedViews.some(v => v.path === view.path)) return
+    console.log(view)
+    if (state.visitedViews.some(v => v.fullPath === view.fullPath)) return
+    console.log(3)
+    console.log('添加新页签')
     state.visitedViews.push(
       Object.assign({}, view, {
         title: view.meta.title || 'no-name'
@@ -13,32 +16,32 @@ const mutations = {
     )
   },
   ADD_CACHED_VIEW: (state, view) => {
-    if (state.cachedViews.includes(view.path)) return
+    if (state.cachedViews.includes(view.fullPath)) return
     if (!view.meta.noCache) {
-      state.cachedViews.push(view.path)
+      state.cachedViews.push(view.fullPath)
     }
   },
 
   DEL_VISITED_VIEW: (state, view) => {
     for (const [i, v] of state.visitedViews.entries()) {
-      if (v.path === view.path) {
+      if (v.fullPath === view.fullPath) {
         state.visitedViews.splice(i, 1)
         break
       }
     }
   },
   DEL_CACHED_VIEW: (state, view) => {
-    const index = state.cachedViews.indexOf(view.path)
+    const index = state.cachedViews.indexOf(view.fullPath)
     index > -1 && state.cachedViews.splice(index, 1)
   },
 
   DEL_OTHERS_VISITED_VIEWS: (state, view) => {
     state.visitedViews = state.visitedViews.filter(v => {
-      return v.meta.affix || v.path === view.path
+      return v.meta.affix || v.fullPath === view.fullPath
     })
   },
   DEL_OTHERS_CACHED_VIEWS: (state, view) => {
-    const index = state.cachedViews.indexOf(view.path)
+    const index = state.cachedViews.indexOf(view.fullPath)
     if (index > -1) {
       state.cachedViews = state.cachedViews.slice(index, index + 1)
     } else {
@@ -58,7 +61,7 @@ const mutations = {
 
   UPDATE_VISITED_VIEW: (state, view) => {
     for (let v of state.visitedViews) {
-      if (v.path === view.path) {
+      if (v.fullPath === view.fullPath) {
         v = Object.assign(v, view)
         break
       }