feat: 优化路由声明，自动声明动态路由的跟路由，动态路由菜单允许只有一级

meadmin-cn · Jun 20, 2023 · 99766d2 · 99766d2
1 parent b3f74d8
commit 99766d2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 16 deletions.
diff --git a/src/layout/components/menu/index.vue b/src/layout/components/menu/index.vue
@@ -17,7 +17,7 @@
 <script setup lang="ts" name="layoutMenu">
 import { useSettingStore, useRouteStore, useGlobalStore } from '@/store';
 import { mixColor, getColorLuma } from '@/utils/helper';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 const routeStore = useRouteStore();
 const globalStore = useGlobalStore();
 const route = useRoute();
@@ -38,10 +38,10 @@ watch(
   { immediate: true },
 );
 const menuBg1 = computed(() =>
-  mixColor(themeConfig.menuBg, getColorLuma(themeConfig.menuBg) < 100 ? '#ffffff' : '#303133', 0.1),
+  mixColor(themeConfig.value.menuBg, getColorLuma(themeConfig.value.menuBg) < 100 ? '#ffffff' : '#303133', 0.1),
 );
-const menuActiveColor = computed(() => (getColorLuma(themeConfig.menuBg) < 100 ? '#ffffff' : '#303133'));
-const menuTextColor = computed(() => mixColor(themeConfig.menuBg, menuActiveColor.value, 0.8));
+const menuActiveColor = computed(() => (getColorLuma(themeConfig.value.menuBg) < 100 ? '#ffffff' : '#303133'));
+const menuTextColor = computed(() => mixColor(themeConfig.value.menuBg, menuActiveColor.value, 0.8));
 </script>
 <style lang="scss" scoped>
 .layout-menu {

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -11,14 +11,6 @@ import { isExternal } from '@/utils/validate';
 import { resolve } from 'path-browserify';
 
 export const constantRoutes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    redirect: PageEnum.HOME,
-    meta: {
-      hideMenu: true,
-      title: '首页',
-    },
-  },
   {
     path: PageEnum.LOGIN,
     component: async () => await import('@/views/login/index.vue'),
@@ -64,13 +56,14 @@ export const flatteningRoutes = (
   basePath = '',
   menuIndex: number[] = [],
   newRoutes: RouteRecordRaw[] = [],
+  baseIndex = 0,
 ) => {
   routes.forEach((route, index) => {
     route.path = resolvePath(route.path, basePath);
     if (!route.meta) {
       route.meta = { title: '' };
     }
-    route.meta.menuIndex = [...menuIndex, index];
+    route.meta.menuIndex = [...menuIndex, index + baseIndex];
     newRoutes.push(Object.assign({ ...route }, { children: [] }));
     if (route.children) {
       flatteningRoutes(route.children, route.path, route.meta.menuIndex, newRoutes);
@@ -79,7 +72,7 @@ export const flatteningRoutes = (
   return newRoutes;
 };
 //扁平化为2级路由
-export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0) => {
+export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0, ignoreFirst = false) => {
   const newRoutes = [] as RouteRecordRaw[];
   routes.forEach((route, index) => {
     if (!route.meta) {
@@ -90,7 +83,15 @@ export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0) => {
       Object.assign(
         { ...route },
         {
-          children: route.children ? flatteningRoutes(route.children, route.path, [index + startIndex]) : [],
+          children: route.children
+            ? flatteningRoutes(
+                route.children,
+                route.path,
+                ignoreFirst ? [] : [index + startIndex],
+                [],
+                ignoreFirst ? index + startIndex : 0,
+              )
+            : [],
         },
       ),
     );

diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts
@@ -5,6 +5,8 @@ import { router, constantRoutes, asyncRoutes, flatteningRoutes2 } from '@/router
 import { RouteRecordRaw } from 'vue-router';
 import { settingConfig } from '@/config';
 import { menuApi } from '@/api/routeMenu';
+import { PageEnum } from '@/dict/pageEnum';
+import { Layout } from '@/router/constant';
 export default defineStore('route', {
   state: () => ({
     addRoutes: [] as RouteRecordRaw[],
@@ -31,7 +33,21 @@ export default defineStore('route', {
     },
     //初始化路由
     async initRoutes() {
-      flatteningRoutes2(await this.generateRoutes(), constantRoutes.length).forEach((route) => router.addRoute(route));
+      flatteningRoutes2(
+        [
+          {
+            path: '/',
+            redirect: PageEnum.HOME,
+            meta: {
+              title: '',
+            },
+            component: Layout,
+            children: await this.generateRoutes(),
+          },
+        ],
+        constantRoutes.length,
+        true,
+      ).forEach((route) => router.addRoute(route));
     },
   },
 });