fix: router

mock/asyncRoutes.ts

@@ -70,6 +70,42 @@ const permissionRouter = {
   ]
 };
 
+const tabsRouter = {
+  path: "/tabs",
+  name: "reTabs",
+  redirect: "/tabs/index",
+  meta: {
+    icon: "IF-team-icontabs",
+    title: "message.hstabs",
+    i18n: true,
+    showLink: true,
+    rank: 8
+  },
+  children: [
+    {
+      path: "/tabs/index",
+      name: "reTabs",
+      meta: {
+        title: "message.hstabs",
+        showLink: true,
+        i18n: true
+      }
+    },
+    {
+      path: "/tabs/detail",
+      name: "tabDetail",
+      meta: {
+        title: "",
+        showLink: false,
+        i18n: false,
+        dynamicLevel: 3,
+        realPath: "/tabs/detail",
+        refreshRedirect: "/tabs/index"
+      }
+    }
+  ]
+};
+
 // 添加不同按钮权限到/permission/button页面中
 function setDifAuthority(authority, routes) {
   routes.children[1].meta.authority = [authority];
@@ -84,12 +120,16 @@ export default [
       if (query.name === "admin") {
         return {
           code: 0,
-          info: [systemRouter, setDifAuthority("v-admin", permissionRouter)]
+          info: [
+            tabsRouter,
+            systemRouter,
+            setDifAuthority("v-admin", permissionRouter)
+          ]
         };
       } else {
         return {
           code: 0,
-          info: [setDifAuthority("v-test", permissionRouter)]
+          info: [tabsRouter, setDifAuthority("v-test", permissionRouter)]
         };
       }
     }

src/router/index.ts

@@ -88,7 +88,7 @@ router.beforeEach((to: toRouteType, _from, next) => {
                 meta
               });
             };
-            // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子）
+            // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对静态路由）
             if (to.meta?.realPath) {
               const routes = router.options.routes;
               const { refreshRedirect } = to.meta;
@@ -111,13 +111,28 @@ router.beforeEach((to: toRouteType, _from, next) => {
                   : router.options.routes;
               const route = findRouteByPath(path, routes);
               const routePartent = getParentPaths(path, routes);
-              handTag(
-                route.path,
-                routePartent[routePartent.length - 1],
-                route.name,
-                route.meta
-              );
-              return router.push(path);
+              // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对动态路由）
+              if (routePartent.length === 0) {
+                const { name, meta } = findRouteByPath(
+                  route?.meta?.refreshRedirect,
+                  routes
+                );
+                handTag(
+                  route.meta?.refreshRedirect,
+                  getParentPaths(route.meta?.refreshRedirect, routes)[0],
+                  name,
+                  meta
+                );
+                return router.push(route.meta?.refreshRedirect);
+              } else {
+                handTag(
+                  route.path,
+                  routePartent[routePartent.length - 1],
+                  route.name,
+                  route.meta
+                );
+                return router.push(path);
+              }
             }
           }
           router.push(to.path);

src/router/modules/index.ts

@@ -1,5 +1,4 @@
 // 静态路由
-import tabsRouter from "./tabs";
 import homeRouter from "./home";
 import errorRouter from "./error";
 import editorRouter from "./editor";
@@ -18,7 +17,6 @@ import {
 
 // 原始静态路由（未做任何处理）
 const routes = [
-  tabsRouter,
   homeRouter,
   errorRouter,
   nestedRouter,

src/router/modules/tabs.ts

@@ -1,42 +0,0 @@
-import Layout from "/@/layout/index.vue";
-
-const tabsRouter = {
-  path: "/tabs",
-  name: "reTabs",
-  component: Layout,
-  redirect: "/tabs/index",
-  meta: {
-    icon: "IF-team-icontabs",
-    title: "message.hstabs",
-    i18n: true,
-    showLink: true,
-    rank: 8
-  },
-  children: [
-    {
-      path: "/tabs/index",
-      name: "reTabs",
-      component: () => import("/@/views/tabs/index.vue"),
-      meta: {
-        title: "message.hstabs",
-        showLink: true,
-        i18n: true
-      }
-    },
-    {
-      path: "/tabs/detail/:id",
-      name: "tabDetail",
-      component: () => import("/@/views/tabs/tabDetail.vue"),
-      meta: {
-        title: "",
-        showLink: false,
-        i18n: false,
-        dynamicLevel: 3,
-        realPath: "/tabs/detail",
-        refreshRedirect: "/tabs/index"
-      }
-    }
-  ]
-};
-
-export default tabsRouter;

src/router/utils.ts

@@ -216,7 +216,11 @@ const addAsyncRoutes = (arrRoutes: Array<RouteRecordRaw>) => {
     if (v.redirect) {
       v.component = Layout;
     } else {
-      v.component = modulesRoutes[`/src/views${v.path}/index.vue`];
+      if (v.meta.realPath) {
+        v.component = modulesRoutes[`/src/views${v.meta.realPath}/index.vue`];
+      } else {
+        v.component = modulesRoutes[`/src/views${v.path}/index.vue`];
+      }
     }
     if (v.children) {
       addAsyncRoutes(v.children);

src/views/tabs/tabDetail.vue → src/views/tabs/detail/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from "vue-router";
 const route = useRoute();
-const index = route.params?.id ?? -1;
+const index = route.query?.id ?? -1;
 </script>
 
 <template>

src/views/tabs/index.vue → src/views/tabs/index/index.vue

@@ -9,7 +9,7 @@ const activeName = ref("tag");
 
 function toDetail(index: number) {
   useMultiTagsStoreHook().handleTags("push", {
-    path: `/tabs/detail/${index}`,
+    path: `/tabs/detail`,
     parentPath: route.matched[0].path,
     name: "tabDetail",
     meta: {
@@ -20,7 +20,7 @@ function toDetail(index: number) {
       realPath: "/tabs/detail"
     }
   });
-  router.push(`/tabs/detail/${index}`);
+  router.push({ name: "tabDetail", query: { id: index } });
 }
 </script>