fix: router initialization problem

2025-11-03 13:44:47 +08:00 · 2022-04-06 13:05:19 +08:00 · 2022-04-06 13:05:19 +08:00 · 5efeb28eb3
commit 5efeb28eb3
parent 5e8723a031
7 changed files with 158 additions and 100 deletions
--- a/build/plugins.ts
+++ b/build/plugins.ts
@ -6,7 +6,6 @@ import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import WindiCSS from "vite-plugin-windicss";
 import { viteMockServe } from "vite-plugin-mock";
-import liveReload from "vite-plugin-live-reload";
 import styleImport from "vite-plugin-style-import";
 import VueI18n from "@intlify/vite-plugin-vue-i18n";
 import ElementPlus from "unplugin-element-plus/vite";
@ -32,8 +31,6 @@ export function getPluginsList(command, VITE_LEGACY) {
    // 线上环境删除console
    removeConsole(),
    viteBuildInfo(),
-    // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
-    liveReload(["src/layout/**/*", "src/router/**/*"]),
    // 自定义主题
    themePreprocessorPlugin({
      scss: {
--- a/package.json
+++ b/package.json
@ -40,8 +40,8 @@
    "css-color-function": "^1.3.3",
    "dayjs": "^1.11.0",
    "driver.js": "^0.9.8",
-    "echarts": "^5.3.1",
-    "element-plus": "^2.1.7",
+    "echarts": "^5.3.2",
+    "element-plus": "^2.1.8",
    "element-resize-detector": "^1.2.3",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
@ -51,7 +51,7 @@
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.0.12",
+    "pinia": "^2.0.13",
    "qs": "^6.10.1",
    "resize-observer-polyfill": "^1.5.1",
    "responsive-storage": "^1.0.11",
@ -121,7 +121,6 @@
    "typescript": "^4.6.3",
    "unplugin-element-plus": "^0.3.1",
    "vite": "^2.9.1",
-    "vite-plugin-live-reload": "^2.1.0",
    "vite-plugin-mock": "^2.9.6",
    "vite-plugin-remove-console": "^0.0.7",
    "vite-plugin-style-import": "1.4.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -41,8 +41,8 @@ specifiers:
  css-color-function: ^1.3.3
  dayjs: ^1.11.0
  driver.js: ^0.9.8
-  echarts: ^5.3.1
-  element-plus: ^2.1.7
+  echarts: ^5.3.2
+  element-plus: ^2.1.8
  element-resize-detector: ^1.2.3
  eslint: ^8.8.0
  eslint-plugin-prettier: ^4.0.0
@ -59,7 +59,7 @@ specifiers:
  nprogress: ^0.2.0
  path: ^0.12.7
  picocolors: ^1.0.0
-  pinia: ^2.0.12
+  pinia: ^2.0.13
  postcss: ^8.4.6
  postcss-html: ^1.3.0
  postcss-import: 14.0.0
@ -84,7 +84,6 @@ specifiers:
  unplugin-element-plus: ^0.3.1
  v-contextmenu: 3.0.0
  vite: ^2.9.1
-  vite-plugin-live-reload: ^2.1.0
  vite-plugin-mock: ^2.9.6
  vite-plugin-remove-console: ^0.0.7
  vite-plugin-style-import: 1.4.1
@ -118,8 +117,8 @@ dependencies:
  css-color-function: 1.3.3
  dayjs: 1.11.0
  driver.js: 0.9.8
-  echarts: 5.3.1
-  element-plus: 2.1.7_1a412d14def5ff5ca1122000e4bee666
+  echarts: 5.3.2
+  element-plus: 2.1.8_1a412d14def5ff5ca1122000e4bee666
  element-resize-detector: 1.2.4
  js-cookie: 3.0.1
  lodash: 4.17.21
@ -129,7 +128,7 @@ dependencies:
  mockjs: 1.1.0
  nprogress: 0.2.0
  path: 0.12.7
-  pinia: 2.0.12_typescript@4.6.3+vue@3.2.31
+  pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
  qs: 6.10.3
  resize-observer-polyfill: 1.5.1
  responsive-storage: 1.0.11_vue@3.2.31
@ -199,7 +198,6 @@ devDependencies:
  typescript: 4.6.3
  unplugin-element-plus: 0.3.2_rollup@2.70.1+vite@2.9.1
  vite: 2.9.1_sass@1.49.9
-  vite-plugin-live-reload: 2.1.0
  vite-plugin-mock: 2.9.6_9cb7b45a435b0b365a3d11bf7a7969b0
  vite-plugin-remove-console: 0.0.7
  vite-plugin-style-import: 1.4.1_vite@2.9.1
@ -931,10 +929,10 @@ packages:
      }
    dev: false

-  /@floating-ui/dom/0.4.2:
+  /@floating-ui/dom/0.4.4:
    resolution:
      {
-        integrity: sha512-2/4vOhMAujkMmGqGX1Gut84phe5MNfk1kGeM+RSTJCpeR0SWR2/RR+/f1r1msOvTQa28wn7HEhxGe71CjYY/vw==
+        integrity: sha512-0Ulu3B/dqQplUUSqnTx0foSrlYuMN+GTtlJWvNJwt6Fr7/PqmlR/Y08o6/+bxDWr6p3roBJRaQ51MDZsNmEhhw==
      }
    dependencies:
      "@floating-ui/core": 0.6.1
@ -1015,10 +1013,10 @@ packages:
      vue: 3.2.31
    dev: true

-  /@intlify/bundle-utils/2.2.1_vue-i18n@9.2.0-beta.33:
+  /@intlify/bundle-utils/3.0.0_vue-i18n@9.2.0-beta.33:
    resolution:
      {
-        integrity: sha512-8n8zhYEKypS+KP22KUAC6BnQifJDDWUGcn3OVPqsThqMMucU22MShGvOuiKqQ4AeT7XQ5O4pudlJmxv3L91JrQ==
+        integrity: sha512-y43Z5Q3ZJvxqtD8xUH6U3yrlZeay7ZTqkzv1GQ4b0mGQtk5uptOT9Ra4qvGuUv8QyPQsortrA/OHWUD5ax5ZNQ==
      }
    engines: { node: ">= 12" }
    peerDependencies:
@ -1030,8 +1028,8 @@ packages:
      vue-i18n:
        optional: true
    dependencies:
-      "@intlify/message-compiler": 9.2.0-beta.33
-      "@intlify/shared": 9.2.0-beta.33
+      "@intlify/message-compiler": 9.2.0-beta.34
+      "@intlify/shared": 9.2.0-beta.34
      jsonc-eslint-parser: 1.4.1
      source-map: 0.6.1
      vue-i18n: 9.2.0-beta.33_vue@3.2.31
@ -1070,6 +1068,18 @@ packages:
    dependencies:
      "@intlify/shared": 9.2.0-beta.33
      source-map: 0.6.1
+    dev: false
+
+  /@intlify/message-compiler/9.2.0-beta.34:
+    resolution:
+      {
+        integrity: sha512-l7JjkXJBW2l6cFZqPvI6oWU6QZn/i70agU6QB02W1O+6quFCFNpsiPswgYyQrmfHt4F4qYhLJUMZltIW/cqcbw==
+      }
+    engines: { node: ">= 12" }
+    dependencies:
+      "@intlify/shared": 9.2.0-beta.34
+      source-map: 0.6.1
+    dev: true

  /@intlify/shared/9.2.0-beta.33:
    resolution:
@ -1077,6 +1087,15 @@ packages:
        integrity: sha512-HldlkV66vMt1vQsuUz4zjQ202C5KW6aHeIQhx7RxBO11i3E8V84dp5MG9epr9GZXVsrCAR56Ekj0HaTqksIRJA==
      }
    engines: { node: ">= 12" }
+    dev: false
+
+  /@intlify/shared/9.2.0-beta.34:
+    resolution:
+      {
+        integrity: sha512-hbUKcVbTOkLVpnlSeZE1OPgEI7FpvhuZF/gb84xECTjXEImIa3u0fIcJKUUffv3dlAx8fMOE5xKgDzngidm0tw==
+      }
+    engines: { node: ">= 12" }
+    dev: true

  /@intlify/vite-plugin-vue-i18n/3.3.1_5e55492be6688dd52c71c76ed1867e7f:
    resolution:
@ -1094,8 +1113,8 @@ packages:
      vue-i18n:
        optional: true
    dependencies:
-      "@intlify/bundle-utils": 2.2.1_vue-i18n@9.2.0-beta.33
-      "@intlify/shared": 9.2.0-beta.33
+      "@intlify/bundle-utils": 3.0.0_vue-i18n@9.2.0-beta.33
+      "@intlify/shared": 9.2.0-beta.34
      "@rollup/pluginutils": 4.2.0
      debug: 4.3.4
      fast-glob: 3.2.11
@ -1193,10 +1212,10 @@ packages:
      fastq: 1.13.0
    dev: true

-  /@popperjs/core/2.11.4:
+  /@popperjs/core/2.11.5:
    resolution:
      {
-        integrity: sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
+        integrity: sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
      }
    dev: false

@ -1679,6 +1698,13 @@ packages:
      }
    dev: false

+  /@vue/devtools-api/6.1.4:
+    resolution:
+      {
+        integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==
+      }
+    dev: false
+
  /@vue/eslint-config-prettier/7.0.0_eslint@8.11.0+prettier@2.6.0:
    resolution:
      {
@ -1795,6 +1821,26 @@ packages:
      vue-demi: 0.12.4_vue@3.2.31
    dev: false

+  /@vueuse/core/8.2.4_vue@3.2.31:
+    resolution:
+      {
+        integrity: sha512-K8DbVLErlHMnEOqy67BrRbDmWCd4Z9X0a1dL6fQdhABLXBydy69Tm7uF5ZUotAqib9sskItYFsAnLhvGSue6bg==
+      }
+    peerDependencies:
+      "@vue/composition-api": ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      "@vue/composition-api":
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      "@vueuse/metadata": 8.2.4
+      "@vueuse/shared": 8.2.4_vue@3.2.31
+      vue: 3.2.31
+      vue-demi: 0.12.4_vue@3.2.31
+    dev: false
+
  /@vueuse/metadata/8.2.0:
    resolution:
      {
@ -1802,6 +1848,13 @@ packages:
      }
    dev: false

+  /@vueuse/metadata/8.2.4:
+    resolution:
+      {
+        integrity: sha512-mn4FLULZAHd6r6vo5hLz+99xzwlVDP9qeVtZGV2Ik40m0zETe2okUr3O1Yoz6FReUoc7KAPrf0/GFpWEXVDAnQ==
+      }
+    dev: false
+
  /@vueuse/motion/2.0.0-beta.12_vue@3.2.31:
    resolution:
      {
@ -1841,6 +1894,24 @@ packages:
      vue-demi: 0.12.4_vue@3.2.31
    dev: false

+  /@vueuse/shared/8.2.4_vue@3.2.31:
+    resolution:
+      {
+        integrity: sha512-sLkuZMEumsmEDYie3m6/nrk7SrLGlyUgtVn/0EJZ8Chaj1YfSmBQuLxNE0ruQ/6VZlqkx44jEZxcgbU7qPyAiw==
+      }
+    peerDependencies:
+      "@vue/composition-api": ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      "@vue/composition-api":
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue: 3.2.31
+      vue-demi: 0.12.4_vue@3.2.31
+    dev: false
+
  /@windicss/config/1.8.3:
    resolution:
      {
@ -3082,10 +3153,10 @@ packages:
      }
    dev: false

-  /echarts/5.3.1:
+  /echarts/5.3.2:
    resolution:
      {
-        integrity: sha512-nWdlbgX3OVY0hpqncSvp0gDt1FRSKWn7lsWEH+PHmfCuvE0QmSw17pczQvm8AvawnLEkmf1Cts7YwQJZNC0AEQ==
+        integrity: sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==
      }
    dependencies:
      tslib: 2.3.0
@ -3103,19 +3174,19 @@ packages:
      }
    dev: true

-  /element-plus/2.1.7_1a412d14def5ff5ca1122000e4bee666:
+  /element-plus/2.1.8_1a412d14def5ff5ca1122000e4bee666:
    resolution:
      {
-        integrity: sha512-jamE9F/a2rfAQJwf3kLaDfWXxhjXuAJAvrto76SLJsJfr3iIUAzC849RHdn6h7tNJy9Yanq8GlQAsdBe5lJmrA==
+        integrity: sha512-hwFtzw0R5lKMhWf3oVvSU/ucfN8RiY8DRaRWo6LktX4RlWWA2QjKfDXtISBi5Rb303Ny4I0Sgz0CA1Fd4Z2GGg==
      }
    peerDependencies:
      vue: ^3.2.0
    dependencies:
      "@ctrl/tinycolor": 3.4.0
      "@element-plus/icons-vue": 1.1.4_vue@3.2.31
-      "@floating-ui/dom": 0.4.2
-      "@popperjs/core": 2.11.4
-      "@vueuse/core": 8.2.0_vue@3.2.31
+      "@floating-ui/dom": 0.4.4
+      "@popperjs/core": 2.11.5
+      "@vueuse/core": 8.2.4_vue@3.2.31
      async-validator: 4.0.7
      dayjs: 1.11.0
      escape-html: 1.0.3
@ -5568,10 +5639,10 @@ packages:
    engines: { node: ">=0.10.0" }
    dev: true

-  /pinia/2.0.12_typescript@4.6.3+vue@3.2.31:
+  /pinia/2.0.13_typescript@4.6.3+vue@3.2.31:
    resolution:
      {
-        integrity: sha512-tUeuYGFrLU5irmGyRAIxp35q1OTcZ8sKpGT4XkPeVcG35W4R6cfXDbCGexzmVqH5lTQJJTXXbNGutIu9yS5yew==
+        integrity: sha512-B7rSqm1xNpwcPMnqns8/gVBfbbi7lWTByzS6aPZ4JOXSJD4Y531rZHDCoYWBwLyHY/8hWnXljgiXp6rRyrofcw==
      }
    peerDependencies:
      "@vue/composition-api": ^1.4.0
@ -5583,7 +5654,7 @@ packages:
      typescript:
        optional: true
    dependencies:
-      "@vue/devtools-api": 6.1.3
+      "@vue/devtools-api": 6.1.4
      typescript: 4.6.3
      vue: 3.2.31
      vue-demi: 0.12.4_vue@3.2.31
@ -7348,16 +7419,6 @@ packages:
      spdx-expression-parse: 3.0.1
    dev: true

-  /vite-plugin-live-reload/2.1.0:
-    resolution:
-      {
-        integrity: sha512-NKIcVqrraPUZbsUKCKs+0StqKAmbAh2csbFxMWTXGDUeOoHAFni9H0CxtQelrYT5bQCV9FT/RveAM8q8bMdnQQ==
-      }
-    dependencies:
-      chalk: 4.1.2
-      chokidar: 3.5.3
-    dev: true
-
  /vite-plugin-mock/2.9.6_9cb7b45a435b0b365a3d11bf7a7969b0:
    resolution:
      {
--- a/src/layout/hooks/nav.ts
+++ b/src/layout/hooks/nav.ts
@ -3,10 +3,10 @@ import { router } from "/@/router";
 import { getConfig } from "/@/config";
 import { emitter } from "/@/utils/mitt";
 import { routeMetaType } from "../types";
+import { remainingPaths } from "/@/router";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageSession } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { remainingPaths } from "/@/router/modules/index";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";

 export function useNav() {
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -3,22 +3,72 @@ import { getConfig } from "/@/config";
 import { toRouteType } from "./types";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
-import { constantRoutes } from "./modules";
 import { findIndex } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
-import remainingRouter from "./modules/remaining";
 import { storageSession } from "/@/utils/storage";
+import { buildHierarchyTree } from "/@/utils/tree";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { Router, RouteMeta, createRouter, RouteRecordName } from "vue-router";
 import {
+  Router,
+  RouteMeta,
+  createRouter,
+  RouteRecordRaw,
+  RouteComponent,
+  RouteRecordName
+} from "vue-router";
+import {
+  ascending,
  initRouter,
  getHistoryMode,
  getParentPaths,
  findRouteByPath,
-  handleAliveRoute
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
 } from "./utils";

+import homeRouter from "./modules/home";
+import ableRouter from "./modules/able";
+import aboutRouter from "./modules/about";
+import errorRouter from "./modules/error";
+import guideRouter from "./modules/guide";
+import resultRouter from "./modules/result";
+import editorRouter from "./modules/editor";
+import nestedRouter from "./modules/nested";
+import flowChartRouter from "./modules/flowchart";
+import remainingRouter from "./modules/remaining";
+import componentsRouter from "./modules/components";
+
+// 原始静态路由（未做任何处理）
+const routes = [
+  homeRouter,
+  ableRouter,
+  aboutRouter,
+  errorRouter,
+  guideRouter,
+  resultRouter,
+  nestedRouter,
+  editorRouter,
+  flowChartRouter,
+  componentsRouter
+];
+
+// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
+export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+);
+
+// 用于渲染菜单，保持原始层级
+export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
+  ...remainingRouter
+);
+
+// 不参与菜单的路由
+export const remainingPaths = Object.keys(remainingRouter).map(v => {
+  return remainingRouter[v].path;
+});
+
 // 创建路由实例
 export const router: Router = createRouter({
  history: getHistoryMode(),
--- a/src/router/modules/index.ts
+++ b/src/router/modules/index.ts
@ -1,49 +0,0 @@
-// 静态路由
-import about from "./about";
-import homeRouter from "./home";
-import ableRouter from "./able";
-import errorRouter from "./error";
-import guideRouter from "./guide";
-import resultRouter from "./result";
-import editorRouter from "./editor";
-import nestedRouter from "./nested";
-import flowChartRouter from "./flowchart";
-import remainingRouter from "./remaining";
-import componentsRouter from "./components";
-import { RouteRecordRaw, RouteComponent } from "vue-router";
-
-import {
-  ascending,
-  formatTwoStageRoutes,
-  formatFlatteningRoutes
-} from "../utils";
-import { buildHierarchyTree } from "/@/utils/tree";
-
-// 原始静态路由（未做任何处理）
-const routes = [
-  about,
-  homeRouter,
-  ableRouter,
-  errorRouter,
-  guideRouter,
-  resultRouter,
-  nestedRouter,
-  editorRouter,
-  flowChartRouter,
-  componentsRouter
-];
-
-// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
-export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
-  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
-);
-
-// 用于渲染菜单，保持原始层级
-export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
-  ...remainingRouter
-);
-
-// 不参与菜单的路由
-export const remainingPaths = Object.keys(remainingRouter).map(v => {
-  return remainingRouter[v].path;
-});
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { cacheType } from "./types";
+import { constantMenus } from "/@/router";
 import { cloneDeep } from "lodash-unified";
 import { RouteConfigs } from "/@/layout/types";
-import { constantMenus } from "/@/router/modules";
 import { ascending, filterTree } from "/@/router/utils";

 export const usePermissionStore = defineStore({