feat: add function of caching tabs in multi page mode; ⭐

新增：多页签模式下增加缓存页签头功能（刷新时签头不再丢失）；

.env

@@ -4,4 +4,5 @@ VUE_APP_PERMISSIONS_KEY=admin.permissions
 VUE_APP_ROLES_KEY=admin.roles
 VUE_APP_USER_KEY=admin.user
 VUE_APP_SETTING_KEY=admin.setting
+VUE_APP_TBAS_KEY=admin.tabs
 VUE_APP_API_BASE_URL=http://api.iczer.com

src/components/cache/AKeepAlive.js

@@ -42,6 +42,15 @@ function pruneCache (keepAliveInstance, filter) {
   }
 }
 
+function pruneCacheEntry2(cache, key, keys) {
+  const cached = cache[key]
+  if (cached) {
+    cached.componentInstance.$destroy()
+  }
+  cache[key] = null
+  remove(keys, key)
+}
+
 function pruneCacheEntry (cache, key, keys, current) {
   const cached = cache[key]
   if (cached && (!current || cached.tag !== current.tag)) {
@@ -64,13 +73,12 @@ export default {
     max: [String, Number],
     clearCaches: Array
   },
-
   watch: {
     clearCaches: function(val) {
       if (val && val.length > 0) {
         const {cache, keys} = this
         val.forEach(key => {
-          pruneCacheEntry(cache, key, keys, this._vnode)
+          pruneCacheEntry2(cache, key, keys)
         })
         this.$emit('clear', [])
       }

src/layouts/tabs/TabsView.vue

@@ -42,7 +42,6 @@ export default {
     return {
       clearCaches: [],
       pageList: [],
-      cachedKeys: [],
       activePage: '',
       menuVisible: false
     }
@@ -61,41 +60,46 @@ export default {
     }
   },
   created () {
+    this.loadCachedTabs()
     const route = this.$route
-    this.pageList.push(route)
+    if (this.pageList.findIndex(item => item.fullPath === route.fullPath) === -1) {
+      this.pageList.push(this.createPage(route))
+    }
     this.activePage = route.fullPath
     if (this.multiPage) {
-      window.addEventListener('page:close', this.closePageListener)
+      this.$nextTick(() => {
+        this.setCachedKey(route)
+      })
+      this.addListener()
     }
   },
   mounted () {
     this.correctPageMinHeight(-this.tabsOffset)
-    if(this.multiPage){
-      this.cachedKeys.push(this.$refs.tabContent.$vnode.key)
-    }
   },
   beforeDestroy() {
-    window.removeEventListener('page:close', this.closePageListener)
+    this.removeListener()
     this.correctPageMinHeight(this.tabsOffset)
   },
   watch: {
     '$route': function (newRoute) {
       this.activePage = newRoute.fullPath
       if (!this.multiPage) {
-        this.pageList = [newRoute]
-      } else if (this.pageList.findIndex(item => item.fullPath == newRoute.fullPath) == -1) {
+        this.pageList = [this.createPage(newRoute)]
+      } else if (this.pageList.findIndex(item => item.fullPath === newRoute.fullPath) === -1) {
+        this.pageList.push(this.createPage(newRoute))
+      }
+      if (this.multiPage) {
         this.$nextTick(() => {
-          this.cachedKeys.push(this.$refs.tabContent.$vnode.key)
+          this.setCachedKey(newRoute)
         })
-        this.pageList.push(newRoute)
       }
     },
     'multiPage': function (newVal) {
       if (!newVal) {
-        this.pageList = [this.$route]
-        window.removeEventListener('page:close', this.closePageListener)
+        this.pageList = [this.createPage(this.$route)]
+        this.removeListener()
       } else {
-        window.addEventListener('page:close', this.closePageListener)
+        this.addListener()
       }
     },
     tabsOffset(newVal, oldVal) {
@@ -114,10 +118,9 @@ export default {
       if (this.pageList.length === 1) {
         return this.$message.warning(this.$t('warn'))
       }
-      let index = this.pageList.findIndex(item => item.fullPath === key)
       //清除缓存
-      this.clearCaches = this.cachedKeys.splice(index, 1)
-      this.pageList.splice(index, 1)
+      let index = this.pageList.findIndex(item => item.fullPath === key)
+      this.clearCaches = this.pageList.splice(index, 1).map(page => page.cachedKey)
       if (next) {
         this.$router.push(next)
       } else if (key === this.activePage) {
@@ -143,12 +146,10 @@ export default {
       }
     },
     closeOthers (pageKey) {
-      const index = this.pageList.findIndex(item => item.fullPath === pageKey)
       // 清除缓存
-      this.clearCaches = this.cachedKeys.filter((item, i) => i != index)
-      this.cachedKeys = this.cachedKeys.slice(index, index + 1)
-
-      this.pageList = this.pageList.slice(index, index + 1)
+      this.clearCaches = this.pageList.filter(item => item.fullPath !== pageKey).map(item => item.cachedKey)
+      this.pageList = this.pageList.filter(item => item.fullPath === pageKey)
+      // 判断跳转
       if (this.activePage != pageKey) {
         this.activePage = pageKey
         this.$router.push(this.activePage)
@@ -157,35 +158,89 @@ export default {
     closeLeft (pageKey) {
       const index = this.pageList.findIndex(item => item.fullPath === pageKey)
       // 清除缓存
-      this.clearCaches = this.cachedKeys.filter((item, i) => i < index)
-      this.cachedKeys = this.cachedKeys.slice(index)
-
+      this.clearCaches = this.pageList.filter((item, i) => i < index).map(item => item.cachedKey)
       this.pageList = this.pageList.slice(index)
+      // 判断跳转
       if (!this.pageList.find(item => item.fullPath === this.activePage)) {
         this.activePage = pageKey
         this.$router.push(this.activePage)
       }
     },
     closeRight (pageKey) {
-      const index = this.pageList.findIndex(item => item.fullPath === pageKey)
       // 清除缓存
-      this.clearCaches = this.cachedKeys.filter((item, i) => i > index)
-      this.cachedKeys = this.cachedKeys.slice(0, index+1)
-
+      const index = this.pageList.findIndex(item => item.fullPath === pageKey)
+      this.clearCaches = this.pageList.filter((item, i) => i > index).map(item => item.cachedKey)
       this.pageList = this.pageList.slice(0, index + 1)
+      // 判断跳转
       if (!this.pageList.find(item => item.fullPath === this.activePage)) {
         this.activePage = pageKey
         this.$router.push(this.activePage)
       }
     },
     pageName(page) {
-      return this.$t(getI18nKey(page.matched[page.matched.length - 1].path))
+      return this.$t(getI18nKey(page.keyPath))
+    },
+    /**
+     * 添加监听器
+     */
+    addListener() {
+      window.addEventListener('page:close', this.closePageListener)
+      window.addEventListener('unload', this.unloadListener)
     },
+    /**
+     * 移出监听器
+     */
+    removeListener() {
+      window.removeEventListener('page:close', this.closePageListener)
+      window.removeEventListener('unload', this.unloadListener)
+    },
+    /**
+     * 页签关闭事件监听
+     * @param event 页签关闭事件
+     */
     closePageListener(event) {
       const {closeRoute, nextRoute} = event.detail
       const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
       this.remove(closePath, nextRoute)
     },
+    /**
+     * 页面 unload 事件监听器，添加页签到 session 缓存，用于刷新时保留页签
+     */
+    unloadListener() {
+      const tabs = this.pageList.map(item => ({...item, _init_: false}))
+      sessionStorage.setItem(process.env.VUE_APP_TBAS_KEY, JSON.stringify(tabs))
+    },
+    createPage(route) {
+      return {keyPath: route.matched[route.matched.length - 1].path, fullPath: route.fullPath}
+    },
+    /**
+     * 设置页面缓存的key
+     * @param route 页面对应的路由
+     */
+    setCachedKey(route) {
+      const page = this.pageList.find(item => item.fullPath === route.fullPath)
+      if (!page._init_) {
+        page.cachedKey = this.$refs.tabContent.$vnode.key
+        page._init_ = true
+      }
+    },
+    /**
+     * 加载缓存的 tabs
+     */
+    loadCachedTabs() {
+      const cachedTabs = sessionStorage.getItem(process.env.VUE_APP_TBAS_KEY)
+      if (cachedTabs) {
+        try {
+          const tabs = JSON.parse(cachedTabs)
+          if (tabs.length > 0) {
+            this.pageList = tabs
+          }
+          sessionStorage.removeItem(process.env.VUE_APP_TBAS_KEY)
+        } catch (e) {
+          console.warn('failed to load cached tabs, got exception:', e)
+        }
+      }
+    },
     ...mapMutations('setting', ['correctPageMinHeight'])
   }
 }