From 9736fb15f75188999c3f943034a5c4d1041d0cf5 Mon Sep 17 00:00:00 2001
From: yuntian001 <479820787@qq.com>
Date: Tue, 6 Sep 2022 22:31:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A=E7=BA=A7?=
=?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=B8=8B=E5=88=87=E6=8D=A2=E7=9A=84=E6=8A=A5?=
=?UTF-8?q?=E9=94=99=E9=97=AE=E9=A2=98=EF=BC=8C=E6=89=81=E5=B9=B3=E5=8C=96?=
=?UTF-8?q?=E4=B8=BA=E4=BA=8C=E7=BA=A7=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/topBar/components/left.vue | 20 +++++--
.../components/menu/components/menuItem.vue | 30 +++--------
src/layout/components/menu/index.vue | 2 +-
src/router/index.ts | 54 ++++++++++++++++++-
src/router/routes/example/multilevel/1.ts | 1 +
src/store/modules/user.ts | 8 +--
types/vue-router.d.ts | 2 +
7 files changed, 84 insertions(+), 33 deletions(-)
diff --git a/src/layout/components/header/components/topBar/components/left.vue b/src/layout/components/header/components/topBar/components/left.vue
index e1787ae6..24d178eb 100644
--- a/src/layout/components/header/components/topBar/components/left.vue
+++ b/src/layout/components/header/components/topBar/components/left.vue
@@ -22,17 +22,31 @@
diff --git a/src/layout/components/menu/index.vue b/src/layout/components/menu/index.vue
index 69c000fd..4f858261 100644
--- a/src/layout/components/menu/index.vue
+++ b/src/layout/components/menu/index.vue
@@ -10,7 +10,7 @@
:collapse="!globalStore.isMobile && themeConfig.menuCollapse"
>
Me - Admin
-
+
diff --git a/src/router/index.ts b/src/router/index.ts
index 2e0c9696..bec23f1d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,9 @@ import Layout from '@/layout/index.vue';
export const asyncRoutes = concatObjectValue(
import.meta.glob('./routes/*.ts', { eager: true, import: 'routes' }),
);
+import { isExternal } from '@/utils/validate';
+import { resolve } from 'path-browserify';
+
export const constantRoutes: RouteRecordRaw[] = [
{
path: '/',
@@ -46,9 +49,58 @@ export const constantRoutes: RouteRecordRaw[] = [
meta: { hideMenu: true, title: '404' },
},
];
+
+//路由地址转为绝对地址
+export const resolvePath = (routePath: string, basePath = '') => {
+ if (isExternal(routePath) || isExternal(basePath)) {
+ return routePath;
+ }
+ return resolve(basePath, routePath);
+};
+
+//扁平化路由
+export const flatteningRoutes = (
+ routes: RouteRecordRaw[],
+ basePath = '',
+ menuIndex: number[] = [],
+ newRoutes: RouteRecordRaw[] = [],
+) => {
+ routes.forEach((route, index) => {
+ route.path = resolvePath(route.path, basePath);
+ if (!route.meta) {
+ route.meta = { title: '' };
+ }
+ route.meta.menuIndex = [...menuIndex, index];
+ newRoutes.push(Object.assign({ ...route }, { children: [] }));
+ if (route.children) {
+ flatteningRoutes(route.children, route.path, route.meta.menuIndex, newRoutes);
+ }
+ });
+ return newRoutes;
+};
+//扁平化为2级路由
+export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0) => {
+ const newRoutes = [] as RouteRecordRaw[];
+ routes.forEach((route, index) => {
+ if (!route.meta) {
+ route.meta = { title: '' };
+ }
+ route.meta.menuIndex = [index + startIndex];
+ newRoutes.push(
+ Object.assign(
+ { ...route },
+ {
+ children: route.children ? flatteningRoutes(route.children, route.path, [index + startIndex]) : [],
+ },
+ ),
+ );
+ });
+ return newRoutes;
+};
+
export const router = createRouter({
history: createWebHashHistory(), //createWebHistory(),
- routes: constantRoutes,
+ routes: flatteningRoutes2(constantRoutes),
});
/**
diff --git a/src/router/routes/example/multilevel/1.ts b/src/router/routes/example/multilevel/1.ts
index 01645e7c..6bfcbd3f 100644
--- a/src/router/routes/example/multilevel/1.ts
+++ b/src/router/routes/example/multilevel/1.ts
@@ -10,6 +10,7 @@ export const routes: RouteRecordRaw[] = [
path: '1-1',
component: LayoutPage,
meta: { title: '多级菜单1-1', alwaysShow: true },
+ redirect: '/example/multilevel/1/1-1/1-1-1',
children: [
{
path: '1-1-1',
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 870733bd..47c68a52 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -5,7 +5,7 @@ import { loginConfig as config } from '@/config';
import { loading } from '@/utils/loading';
import { PageEnum } from '@/enums/pageEnum';
import { loginApi, LoginParams, userInfoApi, UserInfoResult } from '@/api/user';
-import { router } from '@/router';
+import { router, flatteningRoutes2, constantRoutes } from '@/router';
import useRouteStore from './route';
interface UserState {
user: UserInfoResult; // 用户信息
@@ -52,9 +52,9 @@ export default defineStore({
this.token = token;
this.user = await userInfoApi(true)();
this.rules = this.user.rules;
- useRouteStore()
- .generateRoutes()
- .forEach((route) => router.addRoute(route));
+ flatteningRoutes2(useRouteStore().generateRoutes(), constantRoutes.length).forEach((route) =>
+ router.addRoute(route),
+ );
} else {
this.token = '';
}
diff --git a/types/vue-router.d.ts b/types/vue-router.d.ts
index b9f97ec2..9d7b2a2d 100644
--- a/types/vue-router.d.ts
+++ b/types/vue-router.d.ts
@@ -29,6 +29,8 @@ declare module 'vue-router' {
alwaysShow?: boolean;
// 是否需要面包屑false不需要 ture或undefined为需要
breadcrumb?: boolean;
+ //路由在菜单的index deep映射(会动态计算不要设置默认值)
+ menuIndex?: number[];
}
export interface _RouteRecordBase {
// 没有需要展示的子集(会动态计算不要设置默认值)