fix: router initialization problem

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: {

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",

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:
       {

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() {

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(),

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;
-});

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({