perf: 同步完整版分支代码

.env.development

@@ -7,6 +7,8 @@ VITE_PUBLIC_PATH = /
 # 开发环境代理
 VITE_PROXY_DOMAIN = /api
 
+# 开发环境路由历史模式
+VITE_ROUTER_HISTORY = "hash"
+
 # 开发环境后端地址
 VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000"
-

.env.production

@@ -1,5 +1,8 @@
 # 线上环境项目打包路径
 VITE_PUBLIC_PATH = /
 
+# 线上环境路由历史模式
+VITE_ROUTER_HISTORY = "hash"
+
 # 线上环境后端地址
 VITE_PROXY_DOMAIN_REAL = ""

build/index.ts

@@ -5,7 +5,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
     VITE_PORT: 8848,
     VITE_PUBLIC_PATH: "",
     VITE_PROXY_DOMAIN: "",
-    VITE_PROXY_DOMAIN_REAL: ""
+    VITE_PROXY_DOMAIN_REAL: "",
+    VITE_ROUTER_HISTORY: ""
   };
 
   for (const envName of Object.keys(envConf)) {

mock/asyncRoutes.ts

@@ -1,7 +1,6 @@
 // 根据角色动态生成路由
 import { MockMethod } from "vite-plugin-mock";
 
-// http://mockjs.com/examples.html#Object
 const permissionRouter = {
   path: "/permission",
   name: "permission",

package.json

@@ -58,7 +58,7 @@
     "typescript-cookie": "^1.0.0",
     "vue": "^3.2.24",
     "vue-i18n": "^9.2.0-beta.3",
-    "vue-router": "^4.0.11",
+    "vue-router": "^4.0.12",
     "vue-types": "^4.1.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -73,7 +73,7 @@ specifiers:
   vue: ^3.2.24
   vue-eslint-parser: 7.10.0
   vue-i18n: ^9.2.0-beta.3
-  vue-router: ^4.0.11
+  vue-router: ^4.0.12
   vue-types: ^4.1.0
 
 dependencies:

public/serverConfig.json

@@ -13,7 +13,6 @@
   "HideTabs": false,
   "MapConfigure": {
     "amapKey": "97b3248d1553172e81f168cf94ea667e",
-    "baiduKey": "wTHbkkEweiFqZLKunMIjcrb2RcqNXkhc",
     "options": {
       "resizeEnable": true,
       "center": [113.6401, 34.72468],

src/directives/permission/index.ts

@@ -9,7 +9,7 @@ export const auth: Directive = {
       const authRoles = value;
       const hasAuth = usePermissionStoreHook().buttonAuth.includes(authRoles);
       if (!hasAuth) {
-        el.style.display = "none";
+        el.parentNode.removeChild(el);
       }
     } else {
       throw new Error("need roles! Like v-auth=\"['admin','test']\"");

src/layout/components/sidebar/horizontal.vue

@@ -29,7 +29,6 @@ const title =
   getCurrentInstance().appContext.config.globalProperties.$config?.Title;
 
 const menuRef = templateRef<ElRef | null>("menu", null);
-const routeStore = usePermissionStoreHook();
 const route = useRoute();
 const router = useRouter();
 const routers = useRouter().options.routes;
@@ -133,7 +132,7 @@ onMounted(() => {
       @select="menuSelect"
     >
       <sidebar-item
-        v-for="route in routeStore.wholeRoutes"
+        v-for="route in usePermissionStoreHook().wholeMenus"
         :key="route.path"
         :item="route"
         :base-path="route.path"

src/layout/components/sidebar/vertical.vue

@@ -12,7 +12,6 @@ import { usePermissionStoreHook } from "/@/store/modules/permission";
 const route = useRoute();
 const pureApp = useAppStoreHook();
 const router = useRouter().options.routes;
-const routeStore = usePermissionStoreHook();
 const showLogo = ref(storageLocal.getItem("logoVal") || "1");
 const isCollapse = computed(() => {
   return !pureApp.getSidebarStatus;
@@ -72,7 +71,7 @@ onBeforeMount(() => {
         @select="menuSelect"
       >
         <sidebar-item
-          v-for="route in routeStore.wholeRoutes"
+          v-for="route in usePermissionStoreHook().wholeMenus"
           :key="route.path"
           :item="route"
           class="outer-most"

src/layout/components/tag/index.scss

@@ -142,7 +142,7 @@
       transition: transform 0.5s ease-in-out;
 
       .scroll-item {
-        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 
         &:nth-child(1) {
           margin-left: 5px;

src/layout/components/tag/index.vue

@@ -17,16 +17,18 @@ import closeLeft from "/@/assets/svg/close_left.svg";
 import closeOther from "/@/assets/svg/close_other.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 
+import { isEqual } from "lodash-es";
 import { emitter } from "/@/utils/mitt";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
 import { RouteConfigs, tagsViewsType } from "../../types";
-import { handleAliveRoute, delAliveRoutes } from "/@/router";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
+
 import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
 
 const route = useRoute();
@@ -45,6 +47,61 @@ let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
   return useMultiTagsStoreHook()?.multiTags;
 });
 
+const linkIsActive = computed(() => {
+  return item => {
+    if (Object.keys(route.query).length === 0) {
+      if (route.path === item.path) {
+        return "is-active";
+      } else {
+        return "";
+      }
+    } else {
+      if (isEqual(route?.query, item?.query)) {
+        return "is-active";
+      } else {
+        return "";
+      }
+    }
+  };
+});
+
+const scheduleIsActive = computed(() => {
+  return item => {
+    if (Object.keys(route.query).length === 0) {
+      if (route.path === item.path) {
+        return "schedule-active";
+      } else {
+        return "";
+      }
+    } else {
+      if (isEqual(route?.query, item?.query)) {
+        return "schedule-active";
+      } else {
+        return "";
+      }
+    }
+  };
+});
+
+const iconIsActive = computed(() => {
+  return (item, index) => {
+    if (index === 0) return;
+    if (Object.keys(route.query).length === 0) {
+      if (route.path === item.path) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      if (isEqual(route?.query, item?.query)) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  };
+});
+
 const dynamicTagView = () => {
   const index = multiTags.value.findIndex(item => {
     return item.path === route.path;
@@ -228,7 +285,13 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
   // 存放被删除的缓存路由
   let delAliveRouteList = [];
   let valueIndex: number = multiTags.value.findIndex((item: any) => {
-    return item.path === obj.path;
+    if (item.query) {
+      if (item.path === obj.path) {
+        return item.query === obj.query;
+      }
+    } else {
+      return item.path === obj.path;
+    }
   });
 
   const spliceRoute = (
@@ -279,7 +342,8 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
     if (tag === "left") return;
     nextTick(() => {
       router.push({
-        path: newRoute[0].path
+        path: newRoute[0].path,
+        query: newRoute[0].query
       });
     });
   } else {
@@ -291,7 +355,8 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
     });
     !isHasActiveTag &&
       router.push({
-        path: newRoute[0].path
+        path: newRoute[0].path,
+        query: newRoute[0].query
       });
   }
 }
@@ -477,7 +542,8 @@ function openMenu(tag, e) {
 // 触发tags标签切换
 function tagOnClick(item) {
   router.push({
-    path: item?.path
+    path: item?.path,
+    query: item?.query
   });
   showMenuModel(item?.path);
 }
@@ -563,7 +629,7 @@ onBeforeMount(() => {
           :key="index"
           :class="[
             'scroll-item is-closable',
-            $route.path === item.path ? 'is-active' : '',
+            linkIsActive(item),
             $route.path === item.path && showModel === 'card'
               ? 'card-active'
               : ''
@@ -573,12 +639,12 @@ onBeforeMount(() => {
           @mouseleave.prevent="onMouseleave(item, index)"
           @click="tagOnClick(item)"
         >
-          <router-link :to="item.path">{{
+          <router-link :to="item.path"
-            transformI18n(item.meta.title, item.meta.i18n)
+            >{{ transformI18n(item.meta.title, item.meta.i18n) }}
-          }}</router-link>
+          </router-link>
           <el-icon
             v-if="
-              ($route.path === item.path && index !== 0) ||
+              iconIsActive(item, index) ||
               (index === activeIndex && index !== 0)
             "
             class="el-icon-close"
@@ -589,7 +655,7 @@ onBeforeMount(() => {
           <div
             :ref="'schedule' + index"
             v-if="showModel !== 'card'"
-            :class="[$route.path === item.path ? 'schedule-active' : '']"
+            :class="[scheduleIsActive(item)]"
           ></div>
         </div>
       </div>

src/layout/routerView/parent.vue

@@ -0,0 +1,15 @@
+<template>
+  <router-view>
+    <template #default="{ Component, route }">
+      <transition appear name="fade-transform" mode="out-in">
+        <component :is="Component" :key="route.fullPath" />
+      </transition>
+    </template>
+  </router-view>
+</template>
+
+<script lang="ts">
+export default {
+  name: "layoutParentView"
+};
+</script>

src/layout/types.ts

@@ -14,13 +14,16 @@ export const routerArrays: Array<RouteConfigs> = [
 export type RouteConfigs = {
   path?: string;
   parentPath?: string;
+  query?: object;
   meta?: {
     title?: string;
     i18n?: boolean;
     icon?: string;
     showLink?: boolean;
     savedPosition?: boolean;
+    authority?: Array<string>;
   };
+  children?: RouteConfigs[];
   name?: string;
 };
 

src/router/index.ts

@@ -1,135 +1,27 @@
-import {
+import { toRouteType } from "./types";
-  Router,
-  RouteMeta,
-  createRouter,
-  RouteComponent,
-  RouteRecordName,
-  createWebHashHistory,
-  RouteRecordNormalized
-} from "vue-router";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
-import { split, uniqBy } from "lodash-es";
+import { constantRoutes } from "./modules";
-import { useTimeoutFn } from "@vueuse/core";
-import { RouteConfigs } from "/@/layout/types";
 import { transformI18n } from "/@/plugins/i18n";
-import { storageSession, storageLocal } from "/@/utils/storage";
-import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-
-// 静态路由
-import homeRouter from "./modules/home";
-import Layout from "/@/layout/index.vue";
-import errorRouter from "./modules/error";
-import externalLink from "./modules/externalLink";
 import remainingRouter from "./modules/remaining";
-// 动态路由
+import { split, find, findIndex } from "lodash-es";
-import { getAsyncRoutes } from "/@/api/routes";
+import { storageSession, storageLocal } from "/@/utils/storage";
-
+import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
-// https://cn.vitejs.dev/guide/features.html#glob-import
+import { usePermissionStoreHook } from "/@/store/modules/permission";
-const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
+import { Router, RouteMeta, createRouter, RouteRecordName } from "vue-router";
-
+import {
-const constantRoutes: Array<RouteComponent> = [
+  initRouter,
-  homeRouter,
+  getHistoryMode,
-  externalLink,
+  getParentPaths,
-  errorRouter
+  findRouteByPath,
-];
+  handleAliveRoute
-
+} from "./utils";
-// 按照路由中meta下的rank等级升序来排序路由
-export const ascending = arr => {
-  return arr.sort((a: any, b: any) => {
-    return a?.meta?.rank - b?.meta?.rank;
-  });
-};
-
-// 将所有静态路由导出
-export const constantRoutesArr: Array<RouteComponent> = ascending(
-  constantRoutes
-).concat(...remainingRouter);
-
-// 过滤meta中showLink为false的路由
-export const filterTree = data => {
-  const newTree = data.filter(v => v.meta.showLink);
-  newTree.forEach(v => v.children && (v.children = filterTree(v.children)));
-  return newTree;
-};
-
-// 从路由中提取keepAlive为true的name组成数组（此处本项目中并没有用到，只是暴露个方法）
-export const getAliveRoute = () => {
-  const alivePageList = [];
-  const recursiveSearch = treeLists => {
-    if (!treeLists || !treeLists.length) {
-      return;
-    }
-    for (let i = 0; i < treeLists.length; i++) {
-      if (treeLists[i]?.meta?.keepAlive) alivePageList.push(treeLists[i].name);
-      recursiveSearch(treeLists[i].children);
-    }
-  };
-  recursiveSearch(router.options.routes);
-  return alivePageList;
-};
-
-// 批量删除缓存路由
-export const delAliveRoutes = (delAliveRouteList: Array<RouteConfigs>) => {
-  delAliveRouteList.forEach(route => {
-    usePermissionStoreHook().cacheOperate({
-      mode: "delete",
-      name: route?.name
-    });
-  });
-};
-
-// 处理缓存路由（添加、删除、刷新）
-export const handleAliveRoute = (
-  matched: RouteRecordNormalized[],
-  mode?: string
-) => {
-  switch (mode) {
-    case "add":
-      matched.forEach(v => {
-        usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
-      });
-      break;
-    case "delete":
-      usePermissionStoreHook().cacheOperate({
-        mode: "delete",
-        name: matched[matched.length - 1].name
-      });
-      break;
-    default:
-      usePermissionStoreHook().cacheOperate({
-        mode: "delete",
-        name: matched[matched.length - 1].name
-      });
-      useTimeoutFn(() => {
-        matched.forEach(v => {
-          usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
-        });
-      }, 100);
-  }
-};
-
-// 过滤后端传来的动态路由 重新生成规范路由
-export const addAsyncRoutes = (arrRoutes: Array<RouteComponent>) => {
-  if (!arrRoutes || !arrRoutes.length) return;
-  arrRoutes.forEach((v: any) => {
-    if (v.redirect) {
-      v.component = Layout;
-    } else {
-      v.component = modulesRoutes[`/src/views${v.path}/index.vue`];
-    }
-    if (v.children) {
-      addAsyncRoutes(v.children);
-    }
-  });
-  return arrRoutes;
-};
 
 // 创建路由实例
 export const router: Router = createRouter({
-  history: createWebHashHistory(),
+  history: getHistoryMode(),
-  routes: ascending(constantRoutes).concat(...remainingRouter),
+  routes: constantRoutes.concat(...remainingRouter),
+  strict: true,
   scrollBehavior(to, from, savedPosition) {
     return new Promise(resolve => {
       if (savedPosition) {
@@ -145,96 +37,10 @@ export const router: Router = createRouter({
   }
 });
 
-// 初始化路由
-export const initRouter = name => {
-  return new Promise(resolve => {
-    getAsyncRoutes({ name }).then(({ info }) => {
-      if (info.length === 0) {
-        usePermissionStoreHook().changeSetting(info);
-      } else {
-        addAsyncRoutes(info).map((v: any) => {
-          // 防止重复添加路由
-          if (
-            router.options.routes.findIndex(value => value.path === v.path) !==
-            -1
-          ) {
-            return;
-          } else {
-            // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
-            router.options.routes.push(v);
-            // 最终路由进行升序
-            ascending(router.options.routes);
-            router.addRoute(v.name, v);
-            usePermissionStoreHook().changeSetting(info);
-          }
-          resolve(router);
-        });
-      }
-      router.addRoute({
-        path: "/:pathMatch(.*)",
-        redirect: "/error/404"
-      });
-    });
-  });
-};
-
-// 重置路由
-export function resetRouter() {
-  router.getRoutes().forEach(route => {
-    const { name } = route;
-    if (name) {
-      router.hasRoute(name) && router.removeRoute(name);
-    }
-  });
-}
-
-function findRouteByPath(path, routes) {
-  let res = routes.find(item => item.path == path);
-  if (res) {
-    return res;
-  } else {
-    for (let i = 0; i < routes.length; i++) {
-      if (
-        routes[i].children instanceof Array &&
-        routes[i].children.length > 0
-      ) {
-        res = findRouteByPath(path, routes[i].children);
-        if (res) {
-          return res;
-        }
-      }
-    }
-    return null;
-  }
-}
-
-function getParentPaths(path, routes) {
-  // 深度遍历查找
-  function dfs(routes, path, parents) {
-    for (let i = 0; i < routes.length; i++) {
-      const item = routes[i];
-      // 找到path则返回父级path
-      if (item.path === path) return parents;
-      // children不存在或为空则不递归
-      if (!item.children || !item.children.length) continue;
-      // 往下查找时将当前path入栈
-      parents.push(item.path);
-
-      if (dfs(item.children, path, parents).length) return parents;
-      // 深度遍历查找未找到时当前path 出栈
-      parents.pop();
-    }
-    // 未找到时返回空数组
-    return [];
-  }
-
-  return dfs(routes, path, []);
-}
-
 // 路由白名单
 const whiteList = ["/login"];
 
-router.beforeEach((to, _from, next) => {
+router.beforeEach((to: toRouteType, _from, next) => {
   if (to.meta?.keepAlive) {
     const newMatched = to.matched;
     handleAliveRoute(newMatched, "add");
@@ -266,7 +72,7 @@ router.beforeEach((to, _from, next) => {
       }
     } else {
       // 刷新
-      if (usePermissionStoreHook().wholeRoutes.length === 0)
+      if (usePermissionStoreHook().wholeMenus.length === 0)
         initRouter(name.username).then((router: Router) => {
           if (!useMultiTagsStoreHook().getMultiTagsCache) {
             const handTag = (
@@ -282,29 +88,60 @@ router.beforeEach((to, _from, next) => {
                 meta
               });
             };
-            const parentPath = to.matched[0]?.path;
+            // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对静态路由）
             if (to.meta?.realPath) {
-              const { path, name, meta } = to.matched[0]?.children[0];
+              const routes = router.options.routes;
-              handTag(path, parentPath, name, meta);
+              const { refreshRedirect } = to.meta;
-              return router.push(path);
+              const { name, meta } = findRouteByPath(refreshRedirect, routes);
+              handTag(
+                refreshRedirect,
+                getParentPaths(refreshRedirect, routes)[1],
+                name,
+                meta
+              );
+              return router.push(refreshRedirect);
             } else {
               const { path } = to;
-              const routes = router.options.routes;
+              const index = findIndex(remainingRouter, v => {
+                return v.path == path;
+              });
+              const routes =
+                index === -1
+                  ? router.options.routes[0].children
+                  : router.options.routes;
               const route = findRouteByPath(path, routes);
               const routePartent = getParentPaths(path, routes);
-              handTag(
+              // 未开启标签页缓存，刷新页面重定向到顶级路由（参考标签页操作例子，只针对动态路由）
-                route.path,
+              if (routePartent.length === 0) {
-                routePartent[routePartent.length - 1],
+                const { name, meta } = findRouteByPath(
-                route.name,
+                  route?.meta?.refreshRedirect,
-                route.meta
+                  routes
-              );
+                );
-              return router.push(path);
+                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);
+          router.push(to.fullPath);
           // 刷新页面更新标签栏与页面路由匹配
           const localRoutes = storageLocal.getItem("responsive-tags");
-          const optionsRoutes = router.options?.routes;
+          const home = find(router.options?.routes, route => {
+            return route.path === "/";
+          });
+          const optionsRoutes = [home, ...router.options?.routes[0].children];
           const newLocalRoutes = [];
           optionsRoutes.forEach(ors => {
             localRoutes.forEach(lrs => {
@@ -313,10 +150,6 @@ router.beforeEach((to, _from, next) => {
               }
             });
           });
-          storageLocal.setItem(
-            "responsive-tags",
-            uniqBy(newLocalRoutes, "path")
-          );
         });
       next();
     }

src/router/modules/index.ts

@@ -0,0 +1,25 @@
+// 静态路由
+import homeRouter from "./home";
+import errorRouter from "./error";
+import externalLink from "./externalLink";
+import remainingRouter from "./remaining";
+import { RouteRecordRaw, RouteComponent } from "vue-router";
+
+import {
+  ascending,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
+} from "../utils";
+
+// 原始静态路由（未做任何处理）
+const routes = [homeRouter, errorRouter, externalLink];
+
+// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
+export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
+  formatFlatteningRoutes(ascending(routes))
+);
+
+// 用于渲染菜单，保持原始层级
+export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
+  ...remainingRouter
+);

src/router/types.ts

@@ -0,0 +1,9 @@
+import { RouteLocationNormalized } from "vue-router";
+
+export interface toRouteType extends RouteLocationNormalized {
+  meta: {
+    keepAlive: boolean;
+    refreshRedirect: string;
+    realPath: string;
+  };
+}

src/router/utils.ts

@@ -0,0 +1,289 @@
+import {
+  RouterHistory,
+  RouteRecordRaw,
+  RouteComponent,
+  createWebHistory,
+  createWebHashHistory,
+  RouteRecordNormalized
+} from "vue-router";
+import { router } from "./index";
+import { loadEnv } from "../../build";
+import Layout from "/@/layout/index.vue";
+import { useTimeoutFn } from "@vueuse/core";
+import { RouteConfigs } from "/@/layout/types";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+// https://cn.vitejs.dev/guide/features.html#glob-import
+const modulesRoutes = import.meta.glob("/src/views/*/*/*.vue");
+
+// 动态路由
+import { getAsyncRoutes } from "/@/api/routes";
+
+// 按照路由中meta下的rank等级升序来排序路由
+const ascending = (arr: any[]) => {
+  return arr.sort(
+    (a: { meta: { rank: number } }, b: { meta: { rank: number } }) => {
+      return a?.meta?.rank - b?.meta?.rank;
+    }
+  );
+};
+
+// 过滤meta中showLink为false的路由
+const filterTree = (data: RouteComponent[]) => {
+  const newTree = data.filter(
+    (v: { meta: { showLink: boolean } }) => v.meta.showLink
+  );
+  newTree.forEach(
+    (v: { children }) => v.children && (v.children = filterTree(v.children))
+  );
+  return newTree;
+};
+
+// 批量删除缓存路由(keepalive)
+const delAliveRoutes = (delAliveRouteList: Array<RouteConfigs>) => {
+  delAliveRouteList.forEach(route => {
+    usePermissionStoreHook().cacheOperate({
+      mode: "delete",
+      name: route?.name
+    });
+  });
+};
+
+// 通过path获取父级路径
+const getParentPaths = (path: string, routes: RouteRecordRaw[]) => {
+  // 深度遍历查找
+  function dfs(routes: RouteRecordRaw[], path: string, parents: string[]) {
+    for (let i = 0; i < routes.length; i++) {
+      const item = routes[i];
+      // 找到path则返回父级path
+      if (item.path === path) return parents;
+      // children不存在或为空则不递归
+      if (!item.children || !item.children.length) continue;
+      // 往下查找时将当前path入栈
+      parents.push(item.path);
+
+      if (dfs(item.children, path, parents).length) return parents;
+      // 深度遍历查找未找到时当前path 出栈
+      parents.pop();
+    }
+    // 未找到时返回空数组
+    return [];
+  }
+
+  return dfs(routes, path, []);
+};
+
+// 查找对应path的路由信息
+const findRouteByPath = (path: string, routes: RouteRecordRaw[]) => {
+  let res = routes.find((item: { path: string }) => item.path == path);
+  if (res) {
+    return res;
+  } else {
+    for (let i = 0; i < routes.length; i++) {
+      if (
+        routes[i].children instanceof Array &&
+        routes[i].children.length > 0
+      ) {
+        res = findRouteByPath(path, routes[i].children);
+        if (res) {
+          return res;
+        }
+      }
+    }
+    return null;
+  }
+};
+
+// 重置路由
+const resetRouter = (): void => {
+  router.getRoutes().forEach(route => {
+    const { name } = route;
+    if (name) {
+      router.hasRoute(name) && router.removeRoute(name);
+    }
+  });
+};
+
+// 初始化路由
+const initRouter = (name: string) => {
+  return new Promise(resolve => {
+    getAsyncRoutes({ name }).then(({ info }) => {
+      if (info.length === 0) {
+        usePermissionStoreHook().changeSetting(info);
+      } else {
+        formatFlatteningRoutes(addAsyncRoutes(info)).map(
+          (v: RouteRecordRaw) => {
+            // 防止重复添加路由
+            if (
+              router.options.routes[0].children.findIndex(
+                value => value.path === v.path
+              ) !== -1
+            ) {
+              return;
+            } else {
+              // 切记将路由push到routes后还需要使用addRoute，这样路由才能正常跳转
+              router.options.routes[0].children.push(v);
+              // 最终路由进行升序
+              ascending(router.options.routes[0].children);
+              if (!router.hasRoute(v?.name)) router.addRoute(v);
+            }
+            resolve(router);
+          }
+        );
+        usePermissionStoreHook().changeSetting(info);
+      }
+      router.addRoute({
+        path: "/:pathMatch(.*)",
+        redirect: "/error/404"
+      });
+    });
+  });
+};
+
+/**
+ * 将多级嵌套路由处理成一维数组
+ * @param routesList 传入路由
+ * @returns 返回处理后的一维路由
+ */
+const formatFlatteningRoutes = (routesList: RouteRecordRaw[]) => {
+  if (routesList.length <= 0) return routesList;
+  for (let i = 0; i < routesList.length; i++) {
+    if (routesList[i].children) {
+      routesList = routesList
+        .slice(0, i + 1)
+        .concat(routesList[i].children, routesList.slice(i + 1));
+    }
+  }
+  return routesList;
+};
+
+/**
+ * 一维数组处理成多级嵌套数组（三级及以上的路由全部拍成二级，keep-alive 只支持到二级缓存）
+ * https://github.com/xiaoxian521/vue-pure-admin/issues/67
+ * @param routesList 处理后的一维路由菜单数组
+ * @returns 返回将一维数组重新处理成规定路由的格式
+ */
+const formatTwoStageRoutes = (routesList: RouteRecordRaw[]) => {
+  if (routesList.length <= 0) return routesList;
+  const newRoutesList: RouteRecordRaw[] = [];
+  routesList.forEach((v: RouteRecordRaw) => {
+    if (v.path === "/") {
+      newRoutesList.push({
+        component: v.component,
+        name: v.name,
+        path: v.path,
+        redirect: v.redirect,
+        meta: v.meta,
+        children: []
+      });
+    } else {
+      newRoutesList[0].children.push({ ...v });
+    }
+  });
+  return newRoutesList;
+};
+
+// 处理缓存路由（添加、删除、刷新）
+const handleAliveRoute = (matched: RouteRecordNormalized[], mode?: string) => {
+  switch (mode) {
+    case "add":
+      matched.forEach(v => {
+        usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
+      });
+      break;
+    case "delete":
+      usePermissionStoreHook().cacheOperate({
+        mode: "delete",
+        name: matched[matched.length - 1].name
+      });
+      break;
+    default:
+      usePermissionStoreHook().cacheOperate({
+        mode: "delete",
+        name: matched[matched.length - 1].name
+      });
+      useTimeoutFn(() => {
+        matched.forEach(v => {
+          usePermissionStoreHook().cacheOperate({ mode: "add", name: v.name });
+        });
+      }, 100);
+  }
+};
+
+// 过滤后端传来的动态路由 重新生成规范路由
+const addAsyncRoutes = (arrRoutes: Array<RouteRecordRaw>) => {
+  if (!arrRoutes || !arrRoutes.length) return;
+  arrRoutes.forEach((v: RouteRecordRaw) => {
+    if (v.redirect) {
+      v.component = Layout;
+    } else {
+      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);
+    }
+  });
+  return arrRoutes;
+};
+
+// 获取路由历史模式 https://next.router.vuejs.org/zh/guide/essentials/history-mode.html
+const getHistoryMode = (): RouterHistory => {
+  const routerHistory = loadEnv().VITE_ROUTER_HISTORY;
+  // len为1 代表只有历史模式 为2 代表历史模式中存在base参数 https://next.router.vuejs.org/zh/api/#%E5%8F%82%E6%95%B0-1
+  const historyMode = routerHistory.split(",");
+  const leftMode = historyMode[0];
+  const rightMode = historyMode[1];
+  // no param
+  if (historyMode.length === 1) {
+    if (leftMode === "hash") {
+      return createWebHashHistory("");
+    } else if (leftMode === "h5") {
+      return createWebHistory("");
+    }
+  } //has param
+  else if (historyMode.length === 2) {
+    if (leftMode === "hash") {
+      return createWebHashHistory(rightMode);
+    } else if (leftMode === "h5") {
+      return createWebHistory(rightMode);
+    }
+  }
+};
+
+// 是否有权限
+const hasPermissions = (value: Array<string>): boolean => {
+  if (value && value instanceof Array && value.length > 0) {
+    const roles = usePermissionStoreHook().buttonAuth;
+    const permissionRoles = value;
+
+    const hasPermission = roles.some(role => {
+      return permissionRoles.includes(role);
+    });
+
+    if (!hasPermission) {
+      return false;
+    }
+    return true;
+  } else {
+    return false;
+  }
+};
+
+export {
+  ascending,
+  filterTree,
+  initRouter,
+  resetRouter,
+  hasPermissions,
+  getHistoryMode,
+  addAsyncRoutes,
+  delAliveRoutes,
+  getParentPaths,
+  findRouteByPath,
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
+};

src/store/modules/multiTags.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
+import { isEqual } from "lodash-es";
 import { storageLocal } from "/@/utils/storage";
 import { multiType, positionType } from "./types";
 
@@ -54,12 +55,18 @@ export const useMultiTagsStore = defineStore({
         case "push":
           {
             const tagVal = value as multiType;
-            // 判断tag是否已存在:
+            // 判断tag是否已存在
             const tagHasExits = this.multiTags.some(tag => {
               return tag.path === tagVal?.path;
             });
 
-            if (tagHasExits) return;
+            // 判断tag中的query键值是否相等
+            const tagQueryHasExits = this.multiTags.some(tag => {
+              return isEqual(tag.query, tagVal.query);
+            });
+
+            if (tagHasExits && tagQueryHasExits) return;
+
             const meta = tagVal?.meta;
             const dynamicLevel = meta?.dynamicLevel ?? -1;
             if (dynamicLevel > 0) {
@@ -85,10 +92,8 @@ export const useMultiTagsStore = defineStore({
           this.multiTags.splice(position?.startIndex, position?.length);
           this.tagsCache(this.multiTags);
           return this.multiTags;
-          break;
         case "slice":
           return this.multiTags.slice(-1);
-          break;
       }
     }
   }

src/store/modules/permission.ts

@@ -1,28 +1,32 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { cacheType } from "./types";
-import { constantRoutesArr, ascending, filterTree } from "/@/router/index";
+import { RouteConfigs } from "/@/layout/types";
+import { constantMenus } from "/@/router/modules";
+import { ascending, filterTree } from "/@/router/utils";
 
 export const usePermissionStore = defineStore({
   id: "pure-permission",
   state: () => ({
-    // 静态路由
+    // 静态路由生成的菜单
-    constantRoutes: constantRoutesArr,
+    constantMenus,
-    wholeRoutes: [],
+    // 整体路由生成的菜单（静态、动态）
+    wholeMenus: [],
     buttonAuth: [],
     // 缓存页面keepAlive
     cachePageList: []
   }),
   actions: {
+    // 获取异步路由菜单
     asyncActionRoutes(routes) {
-      if (this.wholeRoutes.length > 0) return;
+      if (this.wholeMenus.length > 0) return;
-      this.wholeRoutes = filterTree(
+      this.wholeMenus = filterTree(
-        ascending(this.constantRoutes.concat(routes))
+        ascending(this.constantMenus.concat(routes))
       );
 
-      const getButtonAuth = (arrRoutes: Array<string>) => {
+      const getButtonAuth = (arrRoutes: Array<RouteConfigs>) => {
         if (!arrRoutes || !arrRoutes.length) return;
-        arrRoutes.forEach((v: any) => {
+        arrRoutes.forEach((v: RouteConfigs) => {
           if (v.meta && v.meta.authority) {
             this.buttonAuth.push(...v.meta.authority);
           }
@@ -32,7 +36,7 @@ export const usePermissionStore = defineStore({
         });
       };
 
-      getButtonAuth(this.wholeRoutes);
+      getButtonAuth(this.wholeMenus);
     },
     async changeSetting(routes) {
       await this.asyncActionRoutes(routes);

src/store/modules/types.ts

@@ -25,6 +25,7 @@ export type multiType = {
   path: string;
   parentPath: string;
   name: string;
+  query: object;
   meta: any;
 };
 

src/views/login.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
-import { initRouter } from "/@/router";
+import { initRouter } from "/@/router/utils";
 import { storageSession } from "/@/utils/storage";
 import { addClass, removeClass } from "/@/utils/operate";
 import bg from "/@/assets/login/bg.png";

src/views/permission/button/index.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "permissionButton"
+};
+</script>
+
 <script setup lang="ts">
 import { ref } from "vue";
 import { storageSession } from "/@/utils/storage";

src/views/permission/page/index.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "permissionPage"
+};
+</script>
+
 <script setup lang="ts">
 import { ref, unref } from "vue";
 import { storageSession } from "/@/utils/storage";

types/global.d.ts

@@ -68,6 +68,7 @@ declare global {
     VITE_PUBLIC_PATH: string;
     VITE_PROXY_DOMAIN: string;
     VITE_PROXY_DOMAIN_REAL: string;
+    VITE_ROUTER_HISTORY: string;
   }
 
   declare interface ServerConfigs {
@@ -85,7 +86,6 @@ declare global {
     HideTabs?: boolean;
     MapConfigure?: {
       amapKey?: string;
-      baiduKey?: string;
       options: {
         resizeEnable?: boolean;
         center?: number[];