优化多级菜单之间切换无法缓存的问题

ruoyi-ui/src/layout/components/AppMain.vue

-<!-- @author ruoyi 20201128 支持三级以上菜单缓存 -->
 <template>
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
-      <keep-alive :max="20" :exclude="notCacheName">
+      <keep-alive :include="cachedViews">
         <router-view :key="key" />
       </keep-alive>
     </transition>
@@ -10,119 +9,17 @@
 </template>
 
 <script>
-import Global from "@/layout/components/global.js";
-
 export default {
   name: 'AppMain',
   computed: {
-    notCacheName() {
-      var visitedViews = this.$store.state.tagsView.visitedViews;
-      var noCacheViews = [];
-      Object.keys(visitedViews).some((index) => {
-        if (visitedViews[index].meta.noCache) {
-          noCacheViews.push(visitedViews[index].name);
-        }
-      });
-      return noCacheViews;
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews
     },
     key() {
-      return this.$route.path;
-    },
-  },
-  mounted() {
-    // 关闭标签触发
-    Global.$on("removeCache", (name, view) => {
-      this.removeCache(name, view);
-    });
-  },
-  methods: {
-    // 获取有keep-alive子节点的Vnode
-    getVnode() {
-      // 判断子集非空
-      if (this.$children.length == 0) return false;
-      let vnode;
-      for (let item of this.$children) {
-        // 如果data中有key则代表找到了keep-alive下面的子集，这个key就是router-view上的key
-        if (item.$vnode.data.key) {
-          vnode = item.$vnode;
-          break;
+      return this.$route.path
     }
   }
-      return vnode ? vnode : false;
-    },
-    // 移除keep-alive缓存
-    removeCache(name, view = {}) {
-      let vnode = this.getVnode();
-      if (!vnode) return false;
-      let componentInstance = vnode.parent.componentInstance;
-      // 这个key是用来获取前缀用来后面正则匹配用的
-      let keyStart = vnode.key.split("/")[0];
-      let thisKey = `${keyStart}${view.fullPath}`;
-      let regKey = `${keyStart}${view.path}`;
-
-      this[name]({ componentInstance, thisKey, regKey });
-    },
-    // 移除其他
-    closeOthersTags({ componentInstance, thisKey }) {
-      Object.keys(componentInstance.cache).forEach((key, index) => {
-        if (key != thisKey) {
-          // 销毁实例(这里存在多个key指向一个缓存的情况可能前面一个已经清除掉了所有要加判断)
-          if (componentInstance.cache[key]) {
-            componentInstance.cache[key].componentInstance.$destroy();
-          }
-          // 删除缓存
-          delete componentInstance.cache[key];
-          // 移除key中对应的key
-          componentInstance.keys.splice(index, 1);
-        }
-      });
-    },
-    // 移除所有缓存
-    closeAllTags({ componentInstance }) {
-      // 销毁实例
-      Object.keys(componentInstance.cache).forEach((key) => {
-        if (componentInstance.cache[key]) {
-          componentInstance.cache[key].componentInstance.$destroy();
-        }
-      });
-      // 删除缓存
-      componentInstance.cache = {};
-      // 移除key中对应的key
-      componentInstance.keys = [];
-    },
-    // 移除单个缓存
-    closeSelectedTag({ componentInstance, regKey }) {
-      let reg = new RegExp(`^${regKey}`);
-      Object.keys(componentInstance.cache).forEach((key, i) => {
-        if (reg.test(key)) {
-          // 销毁实例
-          if (componentInstance.cache[key]) {
-            componentInstance.cache[key].componentInstance.$destroy();
-          }
-          // 删除缓存
-          delete componentInstance.cache[key];
-          // 移除key中对应的key
-          componentInstance.keys.splice(i, 1);
-        }
-      });
-    },
-    // 刷新单个缓存
-    refreshSelectedTag({ componentInstance, thisKey }) {
-      Object.keys(componentInstance.cache).forEach((key, index) => {
-        if (null != thisKey && key.replace("/redirect", "") == thisKey) {
-          // 1 销毁实例(这里存在多个key指向一个缓存的情况可能前面一个已经清除掉了所有要加判断)
-          if (componentInstance.cache[key]) {
-            componentInstance.cache[key].componentInstance.$destroy();
-          }
-          // 2 删除缓存
-          delete componentInstance.cache[key];
-          // 3 移除key中对应的key
-          componentInstance.keys.splice(index, 1);
-        }
-      });
-    },
-  },
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -134,7 +31,7 @@ export default {
   overflow: hidden;
 }
 
-.fixed-header + .app-main {
+.fixed-header+.app-main {
   padding-top: 50px;
 }
 
@@ -144,7 +41,7 @@ export default {
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header + .app-main {
+  .fixed-header+.app-main {
     padding-top: 84px;
   }
 }

ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -13,7 +13,7 @@
                 mode="vertical"
             >
                 <sidebar-item
-                    v-for="(route, index) in permission_routes"
+                    v-for="(route, index) in sidebarRouters"
                     :key="route.path  + index"
                     :item="route"
                     :base-path="route.path"
@@ -33,7 +33,7 @@ export default {
     components: { SidebarItem, Logo },
     computed: {
         ...mapState(["settings"]),
-        ...mapGetters(["permission_routes", "sidebar"]),
+        ...mapGetters(["sidebarRouters", "sidebar"]),
         activeMenu() {
             const route = this.$route;
             const { meta, path } = route;

ruoyi-ui/src/layout/components/TagsView/index.vue

@@ -29,7 +29,6 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
-import Global from "@/layout/components/global.js";
 
 export default {
   components: { ScrollPane },
@@ -145,7 +144,6 @@ export default {
           })
         })
       })
-      Global.$emit("removeCache", "refreshSelectedTag", this.selectedTag);
     },
     closeSelectedTag(view) {
       this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
@@ -153,14 +151,12 @@ export default {
           this.toLastView(visitedViews, view)
         }
       })
-      Global.$emit("removeCache", "closeSelectedTag", view);
     },
     closeOthersTags() {
       this.$router.push(this.selectedTag)
       this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
         this.moveToCurrentTag()
       })
-      Global.$emit("removeCache", "closeOthersTags", this.selectedTag);
     },
     closeAllTags(view) {
       this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
@@ -169,7 +165,6 @@ export default {
         }
         this.toLastView(visitedViews, view)
       })
-      Global.$emit("removeCache", "closeAllTags");
     },
     toLastView(visitedViews, view) {
       const latestView = visitedViews.slice(-1)[0]

ruoyi-ui/src/store/getters.js

@@ -10,6 +10,7 @@ const getters = {
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
   permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes
+  permission_routes: state => state.permission.routes,
+  sidebarRouters:state => state.permission.sidebarRouters,
 }
 export default getters

ruoyi-ui/src/store/modules/permission.js

@@ -6,13 +6,17 @@ import ParentView from '@/components/ParentView';
 const permission = {
   state: {
     routes: [],
-    addRoutes: []
+    addRoutes: [],
+    sidebarRouters: []
   },
   mutations: {
     SET_ROUTES: (state, routes) => {
       state.addRoutes = routes
       state.routes = constantRoutes.concat(routes)
-    }
+    },
+    SET_SIDEBAR_ROUTERS: (state, routers) => {
+      state.sidebarRouters = routers
+    },
   },
   actions: {
     // 生成路由
@@ -20,10 +24,14 @@ const permission = {
       return new Promise(resolve => {
         // 向后端请求路由数据
         getRouters().then(res => {
-          const accessedRoutes = filterAsyncRouter(res.data)
-          accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
-          commit('SET_ROUTES', accessedRoutes)
-          resolve(accessedRoutes)
+          const sdata = JSON.parse(JSON.stringify(res.data))
+          const rdata = JSON.parse(JSON.stringify(res.data))
+          const sidebarRoutes = filterAsyncRouter(sdata)
+          const rewriteRoutes = filterAsyncRouter(rdata, true)
+          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+          commit('SET_ROUTES', rewriteRoutes)
+          commit('SET_SIDEBAR_ROUTERS', sidebarRoutes)
+          resolve(rewriteRoutes)
         })
       })
     }
@@ -31,8 +39,11 @@ const permission = {
 }
 
 // 遍历后台传来的路由字符串，转换为组件对象
-function filterAsyncRouter(asyncRouterMap) {
+function filterAsyncRouter(asyncRouterMap, isRewrite = false) {
   return asyncRouterMap.filter(route => {
+    if (isRewrite && route.children) {
+      route.children = filterChildren(route.children)
+    }
     if (route.component) {
       // Layout ParentView 组件特殊处理
       if (route.component === 'Layout') {
@@ -44,12 +55,34 @@ function filterAsyncRouter(asyncRouterMap) {
       }
     }
     if (route.children != null && route.children && route.children.length) {
-      route.children = filterAsyncRouter(route.children)
+      route.children = filterAsyncRouter(route.children, route, isRewrite)
     }
     return true
   })
 }
 
+function filterChildren(childrenMap) {
+  var children = []
+  childrenMap.forEach((el, index) => {
+    if (el.children && el.children.length) {
+      if (el.component === 'ParentView') {
+        el.children.forEach(c => {
+          c.path = el.path + '/' + c.path
+          if (c.children && c.children.length) {
+            children = children.concat(filterChildren(c.children, c))
+            return
+          }
+          children.push(c)
+        })
+        childrenMap.splice(index, 1)
+        return
+      }
+    }
+    children = children.concat(el)
+  })
+  return children
+}
+
 export const loadView = (view) => { // 路由懒加载
   return (resolve) => require([`@/views/${view}`], resolve)
 }

ruoyi-ui/src/views/system/user/profile/resetPwd.vue

@@ -18,7 +18,6 @@
 
 <script>
 import { updateUserPwd } from "@/api/system/user";
-import Global from "@/layout/components/global.js";
 
 export default {
   data() {
@@ -65,7 +64,6 @@ export default {
       });
     },
     close() {
-      Global.$emit("removeCache", "closeSelectedTag", this.$route);
       this.$store.dispatch("tagsView/delView", this.$route);
       this.$router.push({ path: "/index" });
     }

ruoyi-ui/src/views/system/user/profile/userInfo.vue

@@ -24,7 +24,6 @@
 
 <script>
 import { updateUserProfile } from "@/api/system/user";
-import Global from "@/layout/components/global.js";
 
 export default {
   props: {
@@ -69,7 +68,6 @@ export default {
       });
     },
     close() {
-      Global.$emit("removeCache", "closeSelectedTag", this.$route);
       this.$store.dispatch("tagsView/delView", this.$route);
       this.$router.push({ path: "/index" });
     }

ruoyi-ui/src/views/tool/gen/editTable.vue

@@ -127,7 +127,6 @@
 import { getGenTable, updateGenTable } from "@/api/tool/gen";
 import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
 import { listMenu as getMenuTreeselect } from "@/api/system/menu";
-import Global from "@/layout/components/global.js";
 import basicInfoForm from "./basicInfoForm";
 import genInfoForm from "./genInfoForm";
 import Sortable from 'sortablejs'
@@ -208,7 +207,6 @@ export default {
     },
     /** 关闭按钮 */
     close() {
-      Global.$emit("removeCache", "closeSelectedTag", this.$route);
       this.$store.dispatch("tagsView/delView", this.$route);
       this.$router.push({ path: "/tool/gen", query: { t: Date.now()}})
     }