kuailelunwen_new_houtai/src/components/Breadcrumb.vue

<template>
  <div v-if="breadcrumbs.length > 0" class="breadcrumb-container flex-between">
    <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"/>
            </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 v-if="breadRightText" class="gap8 breadRight">
      <img class="ml-8" src="@/assets/site/bind_sites.svg" alt="" />
      站点简称：<a :href="breadRightText">{{ breadRightText }}</a>
    </div>
  </div>
</template>
<script>
import SvgIcon1 from '@/components/SvgIcon1.vue';
import { mapState } from 'vuex';

export default {
  name: 'Breadcrumb',
  components: {
    SvgIcon1,
  },
  computed: {
    breadcrumbs() {
      if (this.$route.meta.hideBreadcrumb) return [];

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

      // 递归查找所有父级路由
      while (currentRoute) {
        // 获取匹配的路由记录
        // const matchedRoute = this.$router.options.routes.find(
        //   r => r.name === currentRoute.name
        // );

        // 构建包含完整参数的对象
        const routeWithParams = {
          path: currentRoute.path,
          query: currentRoute.query,
          params: currentRoute.params
        };

        crumbs.unshift({
          path: routeWithParams,
          title: this.getTitle(currentRoute)
        });

        // 通过 meta.breadcrumbParent 查找父级路由
        if (currentRoute.meta.breadcrumbParent) {
          currentRoute = this.$router.options.routes.find(
            r => r.name === currentRoute.meta.breadcrumbParent
          );
          
          // 如果找到了父路由，创建一个模拟的$route对象
          if (currentRoute) {
            currentRoute = {
              ...currentRoute,
              path: currentRoute.path,
              query: this.$route.query, // 保留当前查询参数
              params: this.$route.params, // 保留当前路由参数
              meta: currentRoute.meta || {}
            };
          }
        } else {
          currentRoute = null;
        }
      }

      return crumbs;
    },
    ...mapState(['breadRightText']) // 从Vuex映射showSidebar状态到组件的计算属性中
  },
  methods: {
    getTitle(route) {
      return typeof route.meta.title === 'function'
        ? route.meta.title(route)
        : route.meta.title || route.name;
    }
  }
};
</script>
<style scoped lang="scss">
/* 保持之前的样式不变 */
.breadcrumb-container {
  padding: 16px 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  .breadRight{
    a{
      text-decoration: none;
      color: #006AFF;
    }
  }
}

.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>