!984 update Web/src/layout/navBars/topBar/breadcrumb.vue.

Merge pull request !984 from 康良涛/N/A

Web/src/layout/navBars/topBar/breadcrumb.vue

@@ -8,10 +8,10 @@
 		/>
 		<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.meta.title : v.meta.tagsViewName">
+				<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="v.path">
 					<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">{{ $t(v.meta.title) }}</div>
+						<div v-if="v.meta.title">{{ $t(v.meta.title) }}</div>
 						<div v-else>{{ v.meta.tagsViewName }}</div>
 					</span>
 					<a v-else @click.prevent="onBreadcrumbClick(v)">
@@ -25,7 +25,7 @@
 
 <script setup lang="ts" name="layoutBreadcrumb">
 import { reactive, computed, onMounted } from 'vue';
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import { onBeforeRouteUpdate, useRoute, useRouter, RouteLocationNormalized } from 'vue-router';
 import { Local } from '/@/utils/storage';
 import other from '/@/utils/other';
 import { storeToRefs } from 'pinia';
@@ -48,7 +48,7 @@ const state = reactive<BreadcrumbState>({
 
 // 动态设置经典、横向布局不显示
 const isShowBreadcrumb = computed(() => {
-	initRouteSplit(route.path);
+	initRouteSplit(route);
 	const { layout, isBreadcrumb } = themeConfig.value;
 	if (layout === 'classic' || layout === 'transverse') return false;
 	else return isBreadcrumb ? true : false;
@@ -77,7 +77,7 @@ const getBreadcrumbList = (arr: RouteItems) => {
 		state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
 			if (state.routeSplitFirst === item.path) {
 				state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
-				state.breadcrumbList.push(item);
+				!state.breadcrumbList.find(a => a.path === item.path) && state.breadcrumbList.push(item);
 				state.routeSplitIndex++;
 				if (item.children) getBreadcrumbList(item.children);
 			}
@@ -85,25 +85,25 @@ const getBreadcrumbList = (arr: RouteItems) => {
 	});
 };
 // 当前路由字符串切割成数组，并删除第一项空内容
-const initRouteSplit = (path: string) => {
+const initRouteSplit = (toRoute: RouteLocationNormalized) => {
 	if (!themeConfig.value.isBreadcrumb) return false;
 	state.breadcrumbList = [routesList.value[0]];
-	state.routeSplit = path.split('/');
+	state.routeSplit = toRoute.path.split('/');
 	state.routeSplit.shift();
 	state.routeSplitFirst = `/${state.routeSplit[0]}`;
 	state.routeSplitIndex = 1;
 	getBreadcrumbList(routesList.value);
-	if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
+	if (toRoute.name === 'home' || (toRoute.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
 	if (state.breadcrumbList.length > 0)
 		state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(<RouteToFrom>route);
 };
 // 页面加载时
 onMounted(() => {
-	initRouteSplit(route.path);
+	initRouteSplit(route);
 });
 // 路由更新时
 onBeforeRouteUpdate((to) => {
-	initRouteSplit(to.path);
+	initRouteSplit(to);
 });
 </script>