From 5efeb28eb31be85233b43fec49262db4330ee6da Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 6 Apr 2022 13:05:19 +0800 Subject: [PATCH] fix: router initialization problem --- build/plugins.ts | 3 - package.json | 7 +- pnpm-lock.yaml | 137 +++++++++++++++++++++++--------- src/layout/hooks/nav.ts | 2 +- src/router/index.ts | 58 +++++++++++++- src/router/modules/index.ts | 49 ------------ src/store/modules/permission.ts | 2 +- 7 files changed, 158 insertions(+), 100 deletions(-) delete mode 100644 src/router/modules/index.ts diff --git a/build/plugins.ts b/build/plugins.ts index 232ca616f..074416da2 100644 --- 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: { diff --git a/package.json b/package.json index 1fc71d1ce..753136088 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7a52c3a18..13b8fb2f7 100644 --- 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: { diff --git a/src/layout/hooks/nav.ts b/src/layout/hooks/nav.ts index 14711556c..a162be933 100644 --- 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() { diff --git a/src/router/index.ts b/src/router/index.ts index 7245abb98..3c4dceabe 100644 --- 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 = formatTwoStageRoutes( + formatFlatteningRoutes(buildHierarchyTree(ascending(routes))) +); + +// 用于渲染菜单，保持原始层级 +export const constantMenus: Array = ascending(routes).concat( + ...remainingRouter +); + +// 不参与菜单的路由 +export const remainingPaths = Object.keys(remainingRouter).map(v => { + return remainingRouter[v].path; +}); + // 创建路由实例 export const router: Router = createRouter({ history: getHistoryMode(), diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts deleted file mode 100644 index 5cf9f91e8..000000000 --- a/src/router/modules/index.ts +++ /dev/null @@ -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 = formatTwoStageRoutes( - formatFlatteningRoutes(buildHierarchyTree(ascending(routes))) -); - -// 用于渲染菜单，保持原始层级 -export const constantMenus: Array = ascending(routes).concat( - ...remainingRouter -); - -// 不参与菜单的路由 -export const remainingPaths = Object.keys(remainingRouter).map(v => { - return remainingRouter[v].path; -}); diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 49b9ea2f4..f2aa691d0 100644 --- 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({