From 3619375b60b73c469847070382f26eb007453cc8 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Tue, 23 Apr 2024 00:26:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E5=8C=85=E5=B1=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Header/components/Breadcrumb/index.vue    | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/layout/components/Header/components/Breadcrumb/index.vue b/src/layout/components/Header/components/Breadcrumb/index.vue
index bfdefe4..30be517 100644
--- a/src/layout/components/Header/components/Breadcrumb/index.vue
+++ b/src/layout/components/Header/components/Breadcrumb/index.vue
@@ -2,17 +2,8 @@
   <div>
     <a-space direction="vertical">
       <a-breadcrumb>
-        <a-breadcrumb-item>
-          <icon-home />
-          首页
-        </a-breadcrumb-item>
-        <a-breadcrumb-item>
-          <icon-at />
-          常用组件
-        </a-breadcrumb-item>
-        <a-breadcrumb-item>
-          <icon-at />
-          文件上传
+        <a-breadcrumb-item v-for="item in breadcrumb" :key="item.path">
+          {{ item.label }}
         </a-breadcrumb-item>
       </a-breadcrumb>
     </a-space>
@@ -20,8 +11,31 @@
 </template>
 
 <script setup lang="ts">
+import { RouteLocationMatched } from "vue-router";
 const route = useRoute();
-console.log("路由信息", route.matched);
+console.log("路由信息", route);
+
+/**
+ * 获取面包屑
+ * 根据当前路由信息获取，route.matched可以获取当前路由的所有父级路由信息
+ * 如果当前路由是重定向路由，则只返回当前路由信息
+ * 否则返回所有父级路由信息，顶层路由重写为首页
+ */
+const breadcrumb = computed(() => {
+  if (route.path === route.matched[0].redirect) {
+    return [{ label: route.meta.title, path: route.path }];
+  }
+  return route.matched.map((item: RouteLocationMatched) => {
+    if (item.name == "/") {
+      return {
+        label: item.children[0].meta?.title || "",
+        path: item.children[0].path
+      };
+    } else {
+      return { label: item.meta.title, path: item.path };
+    }
+  });
+});
 </script>
 
 <style lang="scss" scoped></style>