From fbe3c39c0bccd644e475e8df49fda7ea386a398b Mon Sep 17 00:00:00 2001
From: volimc <volimc@163.com>
Date: Wed, 12 Nov 2025 14:05:19 +0800
Subject: [PATCH] =?UTF-8?q?1=EF=BC=9A=E4=BC=98=E5=8C=96=E9=9D=A2=E5=8C=85?=
 =?UTF-8?q?=E5=B1=91=E4=B8=BB=E9=94=AE=E8=B7=AF=E5=BE=84=E5=89=8D=E7=BC=80?=
 =?UTF-8?q?=E5=8C=B9=E9=85=8D=E5=86=B2=E7=AA=81bug=EF=BC=8C=E7=A1=AE?=
 =?UTF-8?q?=E4=BF=9D=E9=9D=A2=E5=8C=85=E5=B1=91=E5=B1=82=E7=BA=A7=E4=B8=8E?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E9=85=8D=E7=BD=AE=E7=9A=84=E7=9C=9F=E5=AE=9E?=
 =?UTF-8?q?=E7=88=B6=E5=AD=90=E5=85=B3=E7=B3=BB=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/navBars/breadcrumb/breadcrumb.vue | 140 ++++++++++++-------
 1 file changed, 91 insertions(+), 49 deletions(-)

diff --git a/src/layout/navBars/breadcrumb/breadcrumb.vue b/src/layout/navBars/breadcrumb/breadcrumb.vue
index 6f0b9890..4e15b487 100644
--- a/src/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/src/layout/navBars/breadcrumb/breadcrumb.vue
@@ -8,14 +8,14 @@
 		/>
 		<el-breadcrumb class="layout-navbars-breadcrumb-hide">
 			<transition-group name="breadcrumb">
-				<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="!v.meta.tagsViewName ? v.name : v.meta.tagsViewName">
-					<span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
-						<div v-if="!v.meta.tagsViewName">{{ other.setMenuI18n(v) }}</div>
-						<div v-else>{{ v.meta.tagsViewName }}</div>
+				<el-breadcrumb-item v-for="(item, index) in state.breadcrumbList" :key="item.path || index">
+					<span v-if="index === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
+						<SvgIcon :name="item.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
+						<div>{{ item.meta?.tagsViewName || other.setMenuI18n(item) }}</div>
 					</span>
-					<a v-else @click.prevent="onBreadcrumbClick(v)">
-						<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ other.setMenuI18n(v) }}
+					<a v-else @click.prevent="onBreadcrumbClick(item)">
+						<SvgIcon :name="item.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
+						{{ item.meta?.tagsViewName || other.setMenuI18n(item) }}
 					</a>
 				</el-breadcrumb-item>
 			</transition-group>
@@ -25,40 +25,52 @@
 
 <script setup lang="ts" name="layoutBreadcrumb">
 import { reactive, computed, onMounted } from 'vue';
-import { onBeforeRouteUpdate, RouteLocation, useRoute, useRouter } from 'vue-router';
+import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
 import { Local } from '/@/utils/storage';
 import other from '/@/utils/other';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useRoutesList } from '/@/stores/routesList';
 
+interface BreadcrumbState {
+  breadcrumbList: RouteItem[]; // 存储面包屑列表（包含首页）
+}
+
+interface RouteItem {
+	path: string;
+	name?: string;
+	redirect?: string;
+	meta?: {
+		icon?: string;
+		tagsViewName?: string;
+		title?: string;
+		showInBreadcrumb?: boolean;
+		hidden?: boolean;
+	};
+	children?: RouteItem[];
+}
+
 // 定义变量内容
-const stores = useRoutesList();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
-const { routesList } = storeToRefs(stores);
+const { routesList } = storeToRefs(useRoutesList());
 const route = useRoute();
 const router = useRouter();
 const state = reactive<BreadcrumbState>({
 	breadcrumbList: [],
-	routeSplit: [],
-	routeSplitFirst: '',
-	routeSplitIndex: 1,
 });
 
 // 动态设置经典、横向布局不显示
 const isShowBreadcrumb = computed(() => {
-	initRouteSplit(route);
 	const { layout, isBreadcrumb } = themeConfig.value;
-	if (layout === 'classic' || layout === 'transverse') return false;
-	else return isBreadcrumb ? true : false;
+	return !(layout === 'classic' || layout === 'transverse') && isBreadcrumb;
 });
+
 // 面包屑点击时
-const onBreadcrumbClick = (v: RouteItem) => {
-	const { redirect, path } = v;
-	if (redirect) router.push(redirect);
-	else router.push(path);
+const onBreadcrumbClick = (item: RouteItem) => {
+	router.push(item.redirect || item.path);
 };
+
 // 展开/收起左侧菜单点击
 const onThemeConfigChange = () => {
 	themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
@@ -69,45 +81,75 @@ const setLocalThemeConfig = () => {
 	Local.remove('themeConfig');
 	Local.set('themeConfig', themeConfig.value);
 };
-// 处理面包屑数据
-const getBreadcrumbList = (arr: RouteItems) => {
-	arr.forEach((item: RouteItem) => {
-		state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
-			if (state.routeSplitFirst === item.path) {
-				state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
-				state.breadcrumbList.push(item);
-				state.routeSplitIndex++;
-				if (item.children) getBreadcrumbList(item.children);
+
+// 递归查找路由在配置中的完整父级链（不含首页）
+const findRouteParentChain = (routes: RouteItem[], targetPath: string, chain: RouteItem[] = []): RouteItem[] | null => {
+	for (const route of routes) {
+		if (route.meta?.hidden && route.meta.showInBreadcrumb !== true){
+			continue;
+		}
+		const currentChain = [...chain, route];
+		if (route.path === targetPath) {
+			return currentChain;
+		}
+		if (route.children && route.children.length) {
+			const result = findRouteParentChain(route.children, targetPath, currentChain);
+			if (result){
+				return result;
 			}
-		});
-	});
+		}
+	}
+	return null;
 };
-// 当前路由字符串切割成数组，并删除第一项空内容
-const initRouteSplit = (toRoute: RouteLocation) => {
-	let path = toRoute.path;
-	if (!themeConfig.value.isBreadcrumb) return false;
-	state.breadcrumbList = [routesList.value[0]];
-	state.routeSplit = path.split('/');
-	state.routeSplit.shift();
-	state.routeSplitFirst = `/${state.routeSplit[0]}`;
-	state.routeSplitIndex = 1;
-	getBreadcrumbList(routesList.value);
-	state.breadcrumbList.push(route);
-	// 首页或异常页只显示第一个
-	if (toRoute.name === 'router.home' || (toRoute.name === 'staticRoutes.notFound' && state.breadcrumbList.length > 1)) {
-		state.breadcrumbList.splice(0, state.breadcrumbList.length - 1);
-	} else if (state.breadcrumbList.length > 0) {
-		state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setMenuI18n(<RouteToFrom>route);
+
+// 生成面包屑列表（保留首页，结合真实层级）
+const generateBreadcrumb = (toRoute: RouteLocationNormalized) => {
+	// 1. 获取首页路由
+	const homeRoute = routesList.value[0];
+	if (!homeRoute) {
+		state.breadcrumbList = [];
+		return;
+	}
+
+  	// 2. 处理首页自身（只显示首页）
+	if (toRoute.name === 'router.home') {
+		state.breadcrumbList = [homeRoute];
+		return;
+	}
+
+	// 3. 查找当前路由的完整父级链（不含首页）
+	const fullPath = toRoute.path;
+	const routeChain = findRouteParentChain(routesList.value, fullPath) || [];
+
+	// 4. 过滤有效路由（带title且允许显示）
+	const validRoutes = routeChain.filter(item => {
+		return item.meta?.title && item.meta.showInBreadcrumb !== false;
+	});
+
+	// 5. 拼接面包屑：首页 + 有效父级链 + 当前路由
+	state.breadcrumbList = [
+		homeRoute, // 强制添加首页（核心：保留原始逻辑）
+		...validRoutes,
+		{ ...toRoute, meta: { ...toRoute.meta, tagsViewName: other.setMenuI18n(toRoute) } }
+	];
+
+	// 6. 去重（避免首页被重复添加）
+	state.breadcrumbList = [...new Map(state.breadcrumbList.map(item => [item.path, item])).values()];
+
+	// 7. 特殊页面处理（404）
+	if (toRoute.name === 'staticRoutes.notFound' && state.breadcrumbList.length > 1) {
+		state.breadcrumbList = [homeRoute, state.breadcrumbList[state.breadcrumbList.length - 1]];
 	}
 };
+
 // 页面加载时
 onMounted(() => {
-	initRouteSplit(route);
+	generateBreadcrumb(route);
 });
 // 路由更新时
 onBeforeRouteUpdate((to) => {
 	// 传入跳转的目标路由对象
-	initRouteSplit(to);
+	generateBreadcrumb(to);
 });
 </script>
 
-- 
Gitee