新增：增加多页签模式下配置是否缓存页面的功能；⭐ #154

feat: add the function to configure whether to cache pages in multi tab mode;

src/components/cache/AKeepAlive.js

@@ -4,7 +4,16 @@ const patternTypes = [String, RegExp, Array]
 
 function matches (pattern, name) {
   if (Array.isArray(pattern)) {
-    return pattern.indexOf(name) > -1
+    if (pattern.indexOf(name) > -1) {
+      return true
+    } else {
+      for (let item of pattern) {
+        if (isRegExp(item) && item.test(name)) {
+          return true
+        }
+      }
+      return false
+    }
   } else if (typeof pattern === 'string') {
     return pattern.split(',').indexOf(name) > -1
   } else if (isRegExp(pattern)) {
@@ -18,6 +27,13 @@ function getComponentName (opts) {
   return opts && (opts.Ctor.options.name || opts.tag)
 }
 
+function getComponentKey (vnode) {
+  const {componentOptions, key} = vnode
+  return key == null
+    ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
+    : key + componentOptions.Ctor.cid
+}
+
 function getFirstComponentChild (children) {
   if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
@@ -35,7 +51,8 @@ function pruneCache (keepAliveInstance, filter) {
     const cachedNode = cache[key]
     if (cachedNode) {
       const name = getComponentName(cachedNode.componentOptions)
-      if (name && !filter(name)) {
+      const componentKey = getComponentKey(cachedNode)
+      if (name && !filter(name, componentKey)) {
         pruneCacheEntry(cache, key, keys, _vnode)
       }
     }
@@ -70,6 +87,7 @@ export default {
   props: {
     include: patternTypes,
     exclude: patternTypes,
+    excludeKeys: patternTypes,
     max: [String, Number],
     clearCaches: Array
   },
@@ -98,10 +116,13 @@ export default {
 
   mounted () {
     this.$watch('include', val => {
-      pruneCache(this, name => matches(val, name))
+      pruneCache(this, (name) => matches(val, name))
     })
     this.$watch('exclude', val => {
-      pruneCache(this, name => !matches(val, name))
+      pruneCache(this, (name) => !matches(val, name))
+    })
+    this.$watch('excludeKeys', val => {
+      pruneCache(this, (name, key) => !matches(val, key))
     })
   },
 
@@ -112,12 +133,14 @@ export default {
     if (componentOptions) {
       // check pattern
       const name = getComponentName(componentOptions)
-      const { include, exclude } = this
+      const componentKey = getComponentKey(vnode)
+      const { include, exclude, excludeKeys } = this
       if (
         // not included
         (include && (!name || !matches(include, name))) ||
         // excluded
-        (exclude && name && matches(exclude, name))
+        (exclude && name && matches(exclude, name)) ||
+        (excludeKeys && componentKey && matches(excludeKeys, componentKey))
       ) {
         return vnode
       }

src/config/default/setting.config.js

@@ -15,6 +15,7 @@ module.exports = {
   pageWidth: 'fixed',                   //内容区域宽度，fixed:固定宽度，fluid:流式宽度
   weekMode: false,                      //色弱模式，true:开启，false:不开启
   multiPage: false,                     //多页签模式，true:开启，false:不开启
+  cachePage: true,                      //是否缓存页面数据，仅多页签模式下生效，true 缓存, false 不缓存
   hideSetting: false,                   //隐藏设置抽屉，true:隐藏，false:不隐藏
   systemName: 'Vue Antd Admin',         //系统名称
   copyright: '2018 ICZER 工作室出品',     //copyright

src/layouts/tabs/TabsView.vue

@@ -12,10 +12,10 @@
     />
     <div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`">
       <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
-        <a-keep-alive v-if="multiPage" v-model="clearCaches">
+        <a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
           <router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
         </a-keep-alive>
-        <router-view v-else />
+        <router-view ref="tabContent" v-else-if="!refreshing" />
       </page-toggle-transition>
     </div>
   </admin-layout>
@@ -40,11 +40,12 @@ export default {
       pageList: [],
       activePage: '',
       menuVisible: false,
-      refreshing: false
+      refreshing: false,
+      excludeKeys: []
     }
   },
   computed: {
-    ...mapState('setting', ['multiPage', 'animate', 'layout', 'pageWidth']),
+    ...mapState('setting', ['multiPage', 'cachePage', 'animate', 'layout', 'pageWidth']),
     menuItemList() {
       return [
         { key: '1', icon: 'vertical-right', text: this.$t('closeLeft') },
@@ -58,6 +59,7 @@ export default {
     }
   },
   created () {
+    this.loadCacheConfig(this.$router?.options?.routes)
     this.loadCachedTabs()
     const route = this.$route
     if (this.pageList.findIndex(item => item.fullPath === route.fullPath) === -1) {
@@ -79,6 +81,10 @@ export default {
     this.correctPageMinHeight(this.tabsOffset)
   },
   watch: {
+    '$router.options.routes': function (val) {
+      this.excludeKeys = []
+      this.loadCacheConfig(val)
+    },
     '$route': function (newRoute) {
       this.activePage = newRoute.fullPath
       if (!this.multiPage) {
@@ -284,6 +290,17 @@ export default {
         }
       }
     },
+    loadCacheConfig(routes, pCache = true) {
+      routes.forEach(item => {
+        const cacheAble = item.meta?.page?.cacheAble ?? pCache ?? true
+        if (!cacheAble) {
+          this.excludeKeys.push(new RegExp(`${item.fullPath}\\d+$`))
+        }
+        if (item.children) {
+          this.loadCacheConfig(item.children, cacheAble)
+        }
+      })
+    },
     ...mapMutations('setting', ['correctPageMinHeight'])
   }
 }

src/router/config.js

@@ -56,6 +56,9 @@ const options = {
           name: '表单页',
           meta: {
             icon: 'form',
+            page: {
+              cacheAble: false
+            }
           },
           component: PageView,
           children: [