realty/virgo.wzfrontend/console/src/layout/components/breadCrumb.vue

<template>
	<div class="bread-crumb">
		<div class="crumb-box">
			<div class="crumb-item" style="opacity: 1;cursor: pointer;" @click="$router.push('/work')">
				<span>个人工作台</span>
				<span class="tips">/</span>
			</div>
			<div class="crumb-item" v-for="(item,index) in levelList" :key="index">
				<span>{{item}}</span>
				<span class="tips" v-if="index !== levelList.length - 1">/</span>
			</div>
		</div>
		<div style="display: flex;align-items: center;">
			<span>{{$store.getters.organization.name}}</span>
			<span class="hui-tag hui-tag-success" style="margin-left: 10px;">{{$store.getters.identity.name}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'breadCrumb',
		data() {
			return {
				levelList: []
			}
		},
		watch: {
			$route() {
				this.getBreadcrumb();
			}
		},
		created() {
			this.menuList = this.$store.getters.menuData;
			this.getBreadcrumb();
		},
		methods: {
			getBreadcrumb() {
				this.levelList = this.findParent(this.menuList, this.$route.path);
				if (this.levelList.length === 0) this.levelList.push(this.$route.name);
			},
			findParent(dataSource, path) {
				const parentIds = []; // 用于存储所有父节点ID的数组
				// 定义一个递归函数，用于遍历整棵树并查找子节点的所有父节点
				function traverse(node, path) {
					if (node.index === path) { // 如果当前节点的ID等于子节点的ID，则表示已经找到了子节点，可以开始向上查找父节点
						parentIds.push(node.title);
						return true; // 返回true表示已经找到了子节点
					}
					if (node.children) { // 如果当前节点有子节点，则继续遍历子节点
						for (const childNode of node.children) {
							if (traverse(childNode, path)) { // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
								parentIds.unshift(node.title);
								return true;
							}
						}
					}
					return false; // 如果当前节点不是子节点的父节点，则返回false
				}
				// 从根节点开始遍历整棵树，并调用递归函数查找子节点的所有父节点
				for (const node of dataSource) {
					if (traverse(node, path)) { // 如果在当前节点的子树中找到了子节点的父节点，则直接退出循环
						break;
					}
				}
				return parentIds; // 返回所有父节点ID的数组
			}
		}
	}
</script>

<style lang="scss">
	.bread-crumb {
		display: flex;
		justify-content: space-between;

		.crumb-box {
			position: relative;
			padding-top: 1px;
			display: flex;
			align-items: center;

			.crumb-item {
				opacity: 0.5;
				font-weight: 400;
			}

			.crumb-item:last-child {
				opacity: 1;
			}

			.tips {
				margin: 0px 3px;
			}
		}
	}
</style>