kuailelunwen_new_houtai/src/components/Breadcrumb.vue

<template>
  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container">
    <nav>
      <ol class="breadcrumb">
        <li
          v-for="(item, index) in breadcrumbs"
          :key="index"
          class="breadcrumb-item"
          :class="{ active: index === breadcrumbs.length - 1 }"
        >
          <template v-if="index !== breadcrumbs.length - 1">
            <router-link :to="item.path">{{ item.title }}</router-link>
            <!-- <span class="separator">/</span> -->
            <img class="separator" src="@/assets/separator.png" alt="">
          </template>
          <template v-else>
            <span>{{ item.title }}</span>
          </template>
        </li>
      </ol>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumb',
  computed: {
    breadcrumbs() {
      if (this.$route.meta.hideBreadcrumb) return []

      const crumbs = []
      let currentRoute = this.$route

      // 递归查找所有父级路由
      while (currentRoute) {
        crumbs.unshift({
          path: currentRoute.path,
          title: this.getTitle(currentRoute)
        })

        // 通过 meta.breadcrumbParent 查找父级路由
        if (currentRoute.meta.breadcrumbParent) {
          currentRoute = this.$router.options.routes.find(
            r => r.name === currentRoute.meta.breadcrumbParent
          )
        } else {
          currentRoute = null
        }
      }

      return crumbs
    }
  },
  methods: {
    getTitle(route) {
      return typeof route.meta.title === 'function'
        ? route.meta.title(route)
        : route.meta.title || route.name
    }
  }
}
</script>
<style scoped>
/* 保持之前的样式不变 */
.breadcrumb-container {
  padding: 16px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item a {
  color: #626573;
  text-decoration: none;
}

.breadcrumb-item.active span {
  color: #1E2226;;

}

.separator {
  /* margin: 0 5px;
  color: #6c757d;; */
  width: 12px;
  height: 12px;
}
</style>