自定义页面缓存

src/layout/components/AppMain.vue

 <template>
   <section class="app-main">
-       <keep-alive v-if="cachedViews.includes(key)" >
-          <router-view  :key="key" />
-        </keep-alive>
-         <router-view v-else :key="key" />
+    <keep-alive>
+      <router-view v-if="showCache" />
+    </keep-alive>
+    <router-view v-if="!showCache" />
   </section>
 </template>
 
 <script>
-export default {
-  name: 'AppMain',
-  computed: {
-    cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+  export default {
+    name: 'AppMain',
+    computed: {
+      cachedViews() {
+        return this.$store.state.tagsView.cachedViews
+      }
     },
-    key() {
-      return this.$route.name
+    watch: {
+      /* 监听cache*/
+      cachedViews(val) {
+        this.JSONcachedViews = JSON.stringify(val)
+      },
+      /* 监听tagADD*/
+      JSONcachedViews(nv, ov) {
+        let nvobj = JSON.parse(nv)
+        let ovobj = JSON.parse(ov || '{}')
+        this.oldCachedViews = ovobj
+        if (nvobj.length > ovobj.length) {
+          this.addBz = true
+        } else {
+          this.addBz = false
+        }
+      },
+      /* 监听路由*/
+      $route(val) {
+        let name = val.name
+        if (this.addBz) {
+          if (this.cacheList.includes(name)) {
+            this.showCache = false
+          } else {
+            this.cacheList.push(name)
+            this.showCache = true
+          }
+          this.addBz = false
+        } else {
+          this.showCache = true
+
+        }
+
+      }
+    },
+    data() {
+      return {
+        /* 缓存标记*/
+        showCache: true,
+        /* 存储新旧缓存列表*/
+        JSONcachedViews: '',
+        /* tag新增标记*/
+        addBz: false,
+        /* cache列表*/
+        cacheList: [],
+      }
     }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-.app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-
-.fixed-header+.app-main {
-  padding-top: 50px;
-}
-
-.hasTagsView {
   .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    /* 50= navbar  50  */
+    min-height: calc(100vh - 50px);
+    width: 100%;
+    position: relative;
+    overflow: hidden;
   }
 
   .fixed-header+.app-main {
-    padding-top: 84px;
+    padding-top: 50px;
+  }
+
+  .hasTagsView {
+    .app-main {
+      /* 84 = navbar + tags-view = 50 + 34 */
+      min-height: calc(100vh - 84px);
+    }
+
+    .fixed-header+.app-main {
+      padding-top: 84px;
+    }
   }
-}
 </style>
 
 <style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 17px;
+  // fix css style bug in open el-dialog
+  .el-popup-parent--hidden {
+    .fixed-header {
+      padding-right: 17px;
+    }
   }
-}
 </style>