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="/" v-if="item.title == '首页'">
              <SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/>
              <!-- <img class="home-icon" src="@/assets/menu/home-bread.svg" alt="首页"> -->
            </router-link>
            <router-link v-else :to="item.path">{{ item.title }}</router-link>
            <img class="separator" src="@/assets/separator.png" alt="">
          </template>
          <template v-else>
            <span>{{ item.title }}</span>
          </template>
        </li>
      </ol>
    </nav>
  </div>
</template>

<script>
import SvgIcon1 from '@/components/SvgIcon1.vue';
export default {
  name: 'Breadcrumb',
  components: {
    SvgIcon1,
  },
  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 lang="scss" scoped>
.breadcrumb-container {
  padding: 16px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.home-icon{
  width: 16px;
  height: 16px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  height: 22px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
}
.router-link-active{
  height: 100%;
    display: flex;
    align-items: center;
}
.breadcrumb-item a {
  color: #626573;
  text-decoration: none;
  &:hover{
    color: #006AFF;
  }
}

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

}

.separator {
  width: 12px;
  height: 12px;
}
</style>