'admin-21.01.21:处理tagsView逻辑'

vue-admin-wonderful-next/src/router/index.ts

@@ -13,6 +13,7 @@ export const dynamicRoutes = [
             isLink: '',
             isHide: false,
             isKeepAlive: true,
+            isAffix: true,
             icon: 'iconfont icon-shouye'
         },
         children: [{
@@ -24,6 +25,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: true,
                 icon: 'iconfont icon-shouye'
             }
         },
@@ -37,6 +39,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-xitongshezhi'
             },
             children: [
@@ -49,6 +52,7 @@ export const dynamicRoutes = [
                         isLink: '',
                         isHide: false,
                         isKeepAlive: true,
+                        isAffix: false,
                         icon: 'iconfont icon-caidan'
                     }
                 },
@@ -61,6 +65,7 @@ export const dynamicRoutes = [
                         isLink: '',
                         isHide: false,
                         isKeepAlive: true,
+                        isAffix: false,
                         icon: 'iconfont icon-icon-',
                     }
                 }
@@ -76,6 +81,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-quanxian'
             },
             children: [
@@ -88,7 +94,8 @@ export const dynamicRoutes = [
                         title: '前端控制',
                         isLink: '',
                         isHide: false,
-                        isKeepAlive: true
+                        isKeepAlive: true,
+                        isAffix: false
                     },
                     children: [
                         {
@@ -99,7 +106,8 @@ export const dynamicRoutes = [
                                 title: '页面权限',
                                 isLink: '',
                                 isHide: false,
-                                isKeepAlive: true
+                                isKeepAlive: true,
+                                isAffix: false
                             }
                         },
                         {
@@ -110,7 +118,8 @@ export const dynamicRoutes = [
                                 title: '按钮权限',
                                 isLink: '',
                                 isHide: false,
-                                isKeepAlive: true
+                                isKeepAlive: true,
+                                isAffix: false
                             }
                         }
                     ]
@@ -123,7 +132,8 @@ export const dynamicRoutes = [
                         title: '后端控制',
                         isLink: '',
                         isHide: false,
-                        isKeepAlive: true
+                        isKeepAlive: true,
+                        isAffix: false
                     },
                     children: [
                         {
@@ -134,7 +144,8 @@ export const dynamicRoutes = [
                                 title: '页面权限',
                                 isLink: '',
                                 isHide: false,
-                                isKeepAlive: true
+                                isKeepAlive: true,
+                                isAffix: false
                             }
                         },
                         {
@@ -145,7 +156,8 @@ export const dynamicRoutes = [
                                 title: '按钮权限',
                                 isLink: '',
                                 isHide: false,
-                                isKeepAlive: true
+                                isKeepAlive: true,
+                                isAffix: false
                             }
                         }
                     ]
@@ -162,6 +174,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-xitongshezhi'
             },
             children: [
@@ -175,6 +188,7 @@ export const dynamicRoutes = [
                         isLink: '',
                         isHide: false,
                         isKeepAlive: true,
+                        isAffix: false,
                         icon: 'iconfont icon-caidan'
                     },
                     children: [
@@ -187,6 +201,7 @@ export const dynamicRoutes = [
                                 isLink: '',
                                 isHide: false,
                                 isKeepAlive: true,
+                                isAffix: false,
                                 icon: 'iconfont icon-caidan'
                             }
                         },
@@ -200,6 +215,7 @@ export const dynamicRoutes = [
                                 isLink: '',
                                 isHide: false,
                                 isKeepAlive: true,
+                                isAffix: false,
                                 icon: 'iconfont icon-caidan'
                             },
                             children: [
@@ -212,6 +228,7 @@ export const dynamicRoutes = [
                                         isLink: '',
                                         isHide: false,
                                         isKeepAlive: true,
+                                        isAffix: false,
                                         icon: 'iconfont icon-caidan'
                                     }
                                 },
@@ -224,6 +241,7 @@ export const dynamicRoutes = [
                                         isLink: '',
                                         isHide: false,
                                         isKeepAlive: true,
+                                        isAffix: false,
                                         icon: 'iconfont icon-caidan'
                                     }
                                 }
@@ -238,6 +256,7 @@ export const dynamicRoutes = [
                                 isLink: '',
                                 isHide: false,
                                 isKeepAlive: true,
+                                isAffix: false,
                                 icon: 'iconfont icon-caidan'
                             }
                         }
@@ -252,6 +271,7 @@ export const dynamicRoutes = [
                         isLink: '',
                         isHide: false,
                         isKeepAlive: true,
+                        isAffix: false,
                         icon: 'iconfont icon-caidan'
                     }
                 }
@@ -266,6 +286,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-crew_feature'
             }
         },
@@ -278,6 +299,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-fuzhiyemian'
             }
         },
@@ -290,6 +312,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-zujian'
             }
         },
@@ -302,6 +325,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-ico_shuju'
             }
         },
@@ -314,6 +338,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-gerenzhongxin'
             }
         },
@@ -326,6 +351,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: false,
                 icon: 'iconfont icon-gongju'
             }
         },
@@ -336,8 +362,9 @@ export const dynamicRoutes = [
             meta: {
                 title: '外链',
                 isLink: '',
-                isHide: false,
+                isHide: true,
                 isKeepAlive: true,
+                isAffix: true,
                 icon: 'iconfont icon-caozuo-wailian'
             }
         },
@@ -350,6 +377,7 @@ export const dynamicRoutes = [
                 isLink: '',
                 isHide: false,
                 isKeepAlive: true,
+                isAffix: true,
                 icon: 'iconfont icon-neiqianshujuchucun'
             }
         }]
@@ -426,6 +454,11 @@ export function formatTwoStageRoutes(arr: any) {
     return newArr
 }
 
+// 缓存多级嵌套数组处理后的一维数组(tagsView中使用)
+export function setCacheTagsViewRoutes() {
+    store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children)
+}
+
 // 添加动态路由
 export function setAddRoute() {
     formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).map((route: any) => {
@@ -443,6 +476,7 @@ export function resetRoute() {
 
 // 初始化执行函数
 setAddRoute()
+setCacheTagsViewRoutes()
 
 // router.afterEach((to, from) => {
 

vue-admin-wonderful-next/src/store/index.ts

@@ -42,7 +42,8 @@ export interface RootStateTypes {
         layout: string
     },
     routes: Array<object>,
-    caches: Array<string>
+    caches: Array<string>,
+    tagsViewRoutes: Array<object>
 }
 
 export const key: InjectionKey<Store<RootStateTypes>> = Symbol()
@@ -51,7 +52,8 @@ export const store = createStore<RootStateTypes>({
     state: {
         themeConfig,
         routes: [],
-        caches: []
+        caches: [],
+        tagsViewRoutes: []
     },
     mutations: {
         getThemeConfig(state: any, data: object) {
@@ -62,6 +64,9 @@ export const store = createStore<RootStateTypes>({
         },
         getCacheKeepAlive(state: any, data: Array<string>) {
             state.caches = data
+        },
+        getTagsViewRoutes(state: any, data: Array<string>) {
+            state.tagsViewRoutes = data
         }
     },
     actions: {
@@ -74,6 +79,9 @@ export const store = createStore<RootStateTypes>({
         async setCacheKeepAlive({ commit }, data: Array<string>) {
             commit('getCacheKeepAlive', data)
         },
+        async setTagsViewRoutes({ commit }, data: Array<string>) {
+            commit('getTagsViewRoutes', data)
+        },
     }
 })
 

vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue

@@ -70,22 +70,16 @@ export default {
     });
     // 设置/过滤路由（非静态路由/是否显示在菜单中）
     const setFilterRoutes = () => {
-      const routesList = router.getRoutes();
+      console.log(store.state.tagsViewRoutes);
-      routesList.map((route) => {
+      store.state.tagsViewRoutes.map((v) => {
-        if (route.path === "/") {
+        if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
-          state.tagsViewList = filterRoutesFun(route.children);
-        }
       });
     };
-    // 路由过滤递归函数
+    // 当前路由：未设置隐藏（isHide）也显示在 tagsView 中
-    const filterRoutesFun = (arr: Array<object>) => {
+    const addTagsView = (path: string) => {
-      return arr
+      if (state.tagsViewList.some((v) => v.path === path)) return false;
-        .filter((item) => !item.meta.isHide)
+      const item = store.state.tagsViewRoutes.find((v) => v.path === path);
-        .map((item) => {
+      if (!item.meta.isHide) state.tagsViewList.push({ ...item });
-          item = Object.assign({}, item);
-          if (item.children) item.children = filterRoutesFun(item.children);
-          return item;
-        });
     };
     const initSortable = () => {
       const el = document.querySelector(".layout-navbars-tagsview-ul");
@@ -121,15 +115,18 @@ export default {
     });
     onBeforeMount(() => {
       setFilterRoutes();
+      addTagsView(route.path);
     });
     onMounted(() => {
       initSortable();
       scrollRef.value.setScrollLeft(tagsRefs);
     });
+    // 路由更新时
     onBeforeRouteUpdate((to) => {
       state.routePath = to.path;
-      // getTagsRefsIndex(to.path);
+      addTagsView(to.path);
-      // moveToCurrentTag();
+      getTagsRefsIndex(to.path);
+      moveToCurrentTag();
     });
     return {
       isActive,