调整

src/layouts/components/breadcrumb.vue

@@ -0,0 +1,68 @@
+<template>
+	<a-breadcrumb class="breadcrumb">
+		<a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
+			<span v-if="index === breadcrumbList.length - 1" class="no-redirect">
+				{{ item.meta.title }}
+			</span>
+			<a v-else @click.prevent="handleLink(item)">
+				{{ item.meta.title }}
+			</a>
+		</a-breadcrumb-item>
+	</a-breadcrumb>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+const breadcrumbList = ref([])
+
+// 获取面包屑列表
+const getBreadcrumb = () => {
+	let matched = route.matched.filter(item => item.meta && item.meta.title)
+
+	// 如果第一个不是首页，添加首页
+	const first = matched[0]
+	if (first && first.path !== '/') {
+		matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
+	}
+
+	breadcrumbList.value = matched
+}
+
+// 处理点击面包屑
+const handleLink = (item) => {
+	router.push(item.path)
+}
+
+// 监听路由变化
+watch(
+	() => route.path,
+	() => {
+		getBreadcrumb()
+	},
+	{ immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.breadcrumb {
+	font-size: 14px;
+
+	.no-redirect {
+		color: #97a8be;
+		cursor: text;
+	}
+
+	a {
+		color: #1890ff;
+		cursor: pointer;
+
+		&:hover {
+			color: #40a9ff;
+		}
+	}
+}
+</style>