feat(projects): 支持同一路由根据不同query和hash同时显示不同Tab

ISSUES CLOSED: #64
soybeanjs · Jun 6, 2022 · 4122685 · 4122685
1 parent 434ab1c
commit 4122685
Show file tree

Hide file tree

Showing 20 changed files with 363 additions and 88 deletions.
diff --git a/mock/model/route.ts b/mock/model/route.ts
@@ -302,6 +302,53 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         order: 5
       }
     },
+    {
+      name: 'function',
+      path: '/function',
+      component: 'basic',
+      children: [
+        {
+          name: 'function_tab',
+          path: '/function/tab',
+          component: 'self',
+          meta: {
+            title: 'Tab',
+            requiresAuth: true,
+            icon: 'ic:round-tab'
+          }
+        },
+        {
+          name: 'function_tab-detail',
+          path: '/function/tab-detail',
+          component: 'self',
+          meta: {
+            title: 'Tab Detail',
+            requiresAuth: true,
+            hide: true,
+            activeMenu: 'function_tab',
+            icon: 'ic:round-tab'
+          }
+        },
+        {
+          name: 'function_tab-multi-detail',
+          path: '/function/tab-multi-detail',
+          component: 'self',
+          meta: {
+            title: 'Tab Multi Detail',
+            requiresAuth: true,
+            hide: true,
+            multiTab: true,
+            activeMenu: 'function_tab',
+            icon: 'ic:round-tab'
+          }
+        }
+      ],
+      meta: {
+        title: '功能',
+        icon: 'ri:function-line',
+        order: 6
+      }
+    },
     {
       name: 'exception',
       path: '/exception',
@@ -341,7 +388,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
       meta: {
         title: '异常页',
         icon: 'ant-design:exception-outlined',
-        order: 6
+        order: 7
       }
     },
     {
@@ -395,7 +442,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
       meta: {
         title: '多级菜单',
         icon: 'carbon:menu',
-        order: 7
+        order: 8
       }
     },
     {
@@ -407,7 +454,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         requiresAuth: true,
         singleLayout: 'basic',
         icon: 'fluent:book-information-24-regular',
-        order: 8
+        order: 9
       }
     }
   ],
@@ -704,6 +751,53 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         order: 5
       }
     },
+    {
+      name: 'function',
+      path: '/function',
+      component: 'basic',
+      children: [
+        {
+          name: 'function_tab',
+          path: '/function/tab',
+          component: 'self',
+          meta: {
+            title: 'Tab',
+            requiresAuth: true,
+            icon: 'ic:round-tab'
+          }
+        },
+        {
+          name: 'function_tab-detail',
+          path: '/function/tab-detail',
+          component: 'self',
+          meta: {
+            title: 'Tab Detail',
+            requiresAuth: true,
+            hide: true,
+            activeMenu: 'function_tab',
+            icon: 'ic:round-tab'
+          }
+        },
+        {
+          name: 'function_tab-multi-detail',
+          path: '/function/tab-multi-detail',
+          component: 'self',
+          meta: {
+            title: 'Tab Multi Detail',
+            requiresAuth: true,
+            hide: true,
+            multiTab: true,
+            activeMenu: 'function_tab',
+            icon: 'ic:round-tab'
+          }
+        }
+      ],
+      meta: {
+        title: '功能',
+        icon: 'ri:function-line',
+        order: 6
+      }
+    },
     {
       name: 'exception',
       path: '/exception',
@@ -743,7 +837,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
       meta: {
         title: '异常页',
         icon: 'ant-design:exception-outlined',
-        order: 6
+        order: 7
       }
     },
     {
@@ -797,7 +891,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
       meta: {
         title: '多级菜单',
         icon: 'carbon:menu',
-        order: 7
+        order: 8
       }
     },
     {
@@ -809,7 +903,7 @@ export const routeModel: Record<Auth.RoleType, AuthRoute.Route[]> = {
         requiresAuth: true,
         singleLayout: 'basic',
         icon: 'fluent:book-information-24-regular',
-        order: 8
+        order: 9
       }
     }
   ],

diff --git a/src/enum/common.ts b/src/enum/common.ts
@@ -16,7 +16,7 @@ export enum EnumStorageKey {
   /** 用户信息 */
   'user-info' = '__USER_INFO__',
   /** 多页签路由信息 */
-  'tab-routes' = '__TAB_ROUTES__'
+  'multi-tab-routes' = '__MULTI_TAB_ROUTES__'
 }
 
 /** 数据类型 */

diff --git a/src/layouts/common/GlobalContent/index.vue b/src/layouts/common/GlobalContent/index.vue
@@ -12,7 +12,7 @@
         @after-enter="handleAfterEnter"
       >
         <keep-alive :include="routeStore.cacheRoutes">
-          <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
+          <component :is="Component" v-if="app.reloadFlag" :key="route.fullPath" />
         </keep-alive>
       </transition>
     </router-view>

diff --git a/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue b/src/layouts/common/GlobalTab/components/TabDetail/components/ContextMenu.vue
@@ -69,7 +69,7 @@ const options = computed<Option[]>(() => [
   {
     label: '关闭',
     key: 'close-current',
-    disabled: props.currentPath === tab.homeTab.path,
+    disabled: props.currentPath === tab.homeTab.fullPath,
     icon: iconifyRender('ant-design:close-outlined')
   },
   {

diff --git a/src/layouts/common/GlobalTab/components/TabDetail/index.vue b/src/layouts/common/GlobalTab/components/TabDetail/index.vue
@@ -3,15 +3,15 @@
     <component
       :is="activeComponent"
       v-for="(item, index) in tab.tabs"
-      :key="item.path"
-      :is-active="tab.activeTab === item.path"
+      :key="item.fullPath"
+      :is-active="tab.activeTab === item.fullPath"
       :primary-color="theme.themeColor"
-      :closable="item.path !== tab.homeTab.path"
+      :closable="item.name !== tab.homeTab.name"
       :dark-mode="theme.darkMode"
       :class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
-      @click="tab.handleClickTab(item.path)"
-      @close="tab.removeTab(item.path)"
-      @contextmenu="handleContextMenu($event, item.path)"
+      @click="tab.handleClickTab(item.fullPath)"
+      @close="tab.removeTab(item.fullPath)"
+      @contextmenu="handleContextMenu($event, item.fullPath)"
     >
       <Icon v-if="item.meta.icon" :icon="item.meta.icon" class="inline-block align-text-bottom mr-4px text-16px" />
       {{ item.meta.title }}
@@ -77,11 +77,11 @@ function setDropdown(x: number, y: number, currentPath: string) {
 }
 
 /** 点击右键菜单 */
-async function handleContextMenu(e: MouseEvent, path: string) {
+async function handleContextMenu(e: MouseEvent, fullPath: string) {
   e.preventDefault();
   const { clientX, clientY } = e;
   hideDropdown();
-  setDropdown(clientX, clientY, path);
+  setDropdown(clientX, clientY, fullPath);
   await nextTick();
   showDropdown();
 }

diff --git a/src/layouts/common/GlobalTab/index.vue b/src/layouts/common/GlobalTab/index.vue
@@ -45,10 +45,10 @@ function init() {
 }
 
 watch(
-  () => route.path,
+  () => route.fullPath,
   () => {
     tab.addTab(route);
-    tab.setActiveTab(route.path);
+    tab.setActiveTab(route.fullPath);
   }
 );
 

diff --git a/src/router/guard/dynamic.ts b/src/router/guard/dynamic.ts
@@ -31,15 +31,10 @@ export async function createDynamicRouteGuard(
 
     if (to.name === routeName('not-found-page')) {
       // 动态路由没有加载导致被not-found-page路由捕获，等待权限路由加载好了，回到之前的路由
-
       // 若路由是从根路由重定向过来的，重新回到根路由
       const ROOT_ROUTE_NAME: AuthRoute.RouteKey = 'root';
-      if (to.redirectedFrom?.name === ROOT_ROUTE_NAME) {
-        next({ path: '/', replace: true, query: to.query });
-        return false;
-      }
-
-      next({ path: to.fullPath, replace: true, query: to.query });
+      const path = to.redirectedFrom?.name === ROOT_ROUTE_NAME ? '/' : to.fullPath;
+      next({ path, replace: true, query: to.query, hash: to.hash });
       return false;
     }
   }

diff --git a/src/router/helpers/scroll.ts b/src/router/helpers/scroll.ts
@@ -6,10 +6,13 @@ export const scrollBehavior: RouterScrollBehavior = (to, from) => {
     const tab = useTabStore();
 
     if (to.hash) {
-      resolve({
-        el: to.hash,
-        behavior: 'smooth'
-      });
+      const el = document.querySelector(to.hash);
+      if (el) {
+        resolve({
+          el,
+          behavior: 'smooth'
+        });
+      }
     }
 
     const { left, top } = tab.getTabScrollPosition(to.path);

diff --git a/src/router/modules/about.ts b/src/router/modules/about.ts
@@ -8,7 +8,7 @@ const about: AuthRoute.Route = {
     singleLayout: 'basic',
     permissions: ['super', 'admin', 'user'],
     icon: 'fluent:book-information-24-regular',
-    order: 8
+    order: 9
   }
 };
 

diff --git a/src/router/modules/exception.ts b/src/router/modules/exception.ts
@@ -37,7 +37,7 @@ const exception: AuthRoute.Route = {
   meta: {
     title: '异常页',
     icon: 'ant-design:exception-outlined',
-    order: 6
+    order: 7
   }
 };
 

diff --git a/src/router/modules/function.ts b/src/router/modules/function.ts
@@ -0,0 +1,49 @@
+const functionRoute: AuthRoute.Route = {
+  name: 'function',
+  path: '/function',
+  component: 'basic',
+  children: [
+    {
+      name: 'function_tab',
+      path: '/function/tab',
+      component: 'self',
+      meta: {
+        title: 'Tab',
+        requiresAuth: true,
+        icon: 'ic:round-tab'
+      }
+    },
+    {
+      name: 'function_tab-detail',
+      path: '/function/tab-detail',
+      component: 'self',
+      meta: {
+        title: 'Tab Detail',
+        requiresAuth: true,
+        hide: true,
+        activeMenu: 'function_tab',
+        icon: 'ic:round-tab'
+      }
+    },
+    {
+      name: 'function_tab-multi-detail',
+      path: '/function/tab-multi-detail',
+      component: 'self',
+      meta: {
+        title: 'Tab Multi Detail',
+        requiresAuth: true,
+        hide: true,
+        multiTab: true,
+        activeMenu: 'function_tab',
+        icon: 'ic:round-tab'
+      }
+    }
+  ],
+  meta: {
+    title: '功能',
+    icon: 'ri:function-line',
+    order: 6
+  }
+};
+
+export default functionRoute;
diff --git a/src/router/modules/multi-menu.ts b/src/router/modules/multi-menu.ts
@@ -49,7 +49,7 @@ const multiMenu: AuthRoute.Route = {
   meta: {
     title: '多级菜单',
     icon: 'carbon:menu',
-    order: 6
+    order: 8
   }
 };