feat: 面包屑跳转

src/layout/components/Header/components/Breadcrumb/index.vue

@@ -2,8 +2,11 @@
   <div>
     <a-space direction="vertical">
       <a-breadcrumb>
-        <a-breadcrumb-item v-for="item in breadcrumb" :key="item.path">
-          {{ item.label }}
+        <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="item.path">
+          <span v-if="index === breadcrumb.length - 1" class="main_button">{{ item?.meta?.title || "" }}</span>
+          <span v-else class="route_button" @click="onBreadcrumb(item as RouteLocationMatched)">{{
+            item?.meta?.title || ""
+          }}</span>
         </a-breadcrumb-item>
       </a-breadcrumb>
     </a-space>
@@ -13,29 +16,42 @@
 <script setup lang="ts">
 import { RouteLocationMatched } from "vue-router";
 const route = useRoute();
-console.log("路由信息", route);
+const router = useRouter();
 
 /**
  * 获取面包屑
  * 根据当前路由信息获取，route.matched可以获取当前路由的所有父级路由信息
- * 如果当前路由是重定向路由，则只返回当前路由信息
+ * 如果当前路由是顶层的重定向路由，则只返回当前路由信息(说明当前就是顶层)
  * 否则返回所有父级路由信息，顶层路由重写为首页
  */
 const breadcrumb = computed(() => {
   if (route.path === route.matched[0].redirect) {
-    return [{ label: route.meta.title, path: route.path }];
+    return [route];
   }
   return route.matched.map((item: RouteLocationMatched) => {
     if (item.name == "/") {
-      return {
-        label: item.children[0].meta?.title || "",
-        path: item.children[0].path
-      };
+      return item.children[0];
     } else {
-      return { label: item.meta.title, path: item.path };
+      return item;
     }
   });
 });
+
+// 面包屑跳转
+const onBreadcrumb = (route: RouteLocationMatched) => {
+  let path = route.redirect ? route.redirect : route.path;
+  router.replace((path as string) || "");
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.main_button {
+  color: $color-text-1;
+}
+.route_button {
+  color: $color-text-2;
+  &:hover {
+    color: $color-primary;
+  }
+}
+</style>

src/router/route.ts

@@ -115,7 +115,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
       {
         path: "/multilevel-menu",
         name: "multilevel-menu",
-        redirect: "/multilevel-menu/second-menu",
+        redirect: "/multilevel-menu/second-menu-1",
         meta: {
           title: "multilevel-menu",
           link: "",
@@ -145,6 +145,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
           {
             path: "/multilevel-menu/second-menu-2",
             name: "second-menu-2",
+            redirect: "/multilevel-menu/third-menu-1",
             meta: {
               title: "second-menu-2",
               link: "",