fix(layouts): 🐛 [layouts] 浏览器回退标签页显示问题

jsxiaosi · Nov 24, 2022 · 23b3d2c · 23b3d2c
1 parent d95e88b
commit 23b3d2c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/src/layouts/pageLayouts/components/AppTabs/index.vue b/src/layouts/pageLayouts/components/AppTabs/index.vue
@@ -36,7 +36,6 @@
     emitter.on('siteBarChange', ({ routeRaw }) => {
       addRouteTabs(routeRaw as unknown as MultiTabsType);
     });
-    addRouteTabs(route);
   });
 
   const tabRemoveChange = (e: string) => {

diff --git a/src/layouts/pageLayouts/components/Sidebar/index.vue b/src/layouts/pageLayouts/components/Sidebar/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { PropType } from 'vue';
-  import { computed, ref, watch } from 'vue';
+  import { onMounted, computed, ref, watch } from 'vue';
   import { useRoute } from 'vue-router';
   import { useNavSideBar } from '../../hooks/useNavSideBar';
   import SidebarItem from './SidebarItem.vue';
@@ -43,13 +43,18 @@
   getSubMenuData(route.path);
   watch(
     () => [route.path, appConfig.value.sidebarMode],
-    () => {
+    ([newPath], [oldPath]) => {
       if (appConfig.value.sidebarMode === 'blend') {
         getSubMenuData(route.path);
       }
+      if (newPath !== oldPath) selectMenu(route.path);
     },
   );
 
+  onMounted(() => {
+    selectMenu(route.path);
+  });
+
   const activeMenyu = computed<string>(() => {
     const { meta, path } = route;
     if (meta.activeMenu) {

diff --git a/src/layouts/pageLayouts/hooks/useNavSideBar.ts b/src/layouts/pageLayouts/hooks/useNavSideBar.ts
@@ -1,4 +1,5 @@
 import { useRouter } from 'vue-router';
+import { useThrottleFn } from '@vueuse/core';
 import type { AppRouteRecordRaw } from '#/route';
 import { findRouteByPath } from '@/router/utils';
 import { usePermissionStoreHook } from '@/store/modules/permission';
@@ -9,7 +10,7 @@ export const useNavSideBar = () => {
   const router = (useRouter().options.routes.find((i) => i.path === '/') ||
     []) as AppRouteRecordRaw;
 
-  const selectMenu = (path: string) => {
+  const selectMenu = useThrottleFn((path: string) => {
     const findRoute = findRouteByPath(path, router.children || []);
     if (findRoute) {
       if (findRoute.redirect && findRoute.children && findRoute.children.length) {
@@ -22,7 +23,7 @@ export const useNavSideBar = () => {
         routeRaw: findRoute,
       });
     }
-  };
+  }, 100);
 
   const logout = () => {
     usePermissionStoreHook().handleRemoveMultiTabs();

diff --git a/src/router/modules/components/index.ts b/src/router/modules/components/index.ts
@@ -10,7 +10,7 @@ const component: AppRouteRecordRaw[] = [
     meta: { title: t('route.pathName.components'), icon: 'components', position: 2 },
     children: [
       {
-        path: '/components/form',
+        path: 'form',
         name: 'RtForm',
         component: () => import('@/views/components/form/index.vue'),
         meta: { title: t('route.pathName.form'), keepAlive: true },
@@ -47,7 +47,7 @@ const component: AppRouteRecordRaw[] = [
         meta: { title: t('route.pathName.date') },
         children: [
           {
-            path: '/components/date-time/date-select',
+            path: 'date-select',
             name: 'RtDate',
             component: () => import('@/views/components/date/index.vue'),
             meta: { title: t('route.pathName.dateSelect'), keepAlive: true },