yoe-shop-web/src/layout/components/breadcrumb.vue

<template>
  <!-- 面包屑组件 -->
  <div class="breadcrumb flex-row-center" :style="{ 'background': meta.breadcrumbColor ? meta.breadcrumbColor : '#ffffff' }">
    <div class="breadcrumb-bos flex-row-start">
      <div class="home" @click="goHome">首页</div>
      <template v-if="meta.navList && meta.navList.length > 0">
        <div v-for="(item, index) in meta.navList" :key="index" class="nav-list">
          <el-icon style="margin: 0 4px"><ArrowRight /></el-icon>
          <div @click="goPath(item)" class="like">{{ item.title || '' }}</div>
        </div>
      </template>
      <el-icon style="margin: 0 4px"><ArrowRight /></el-icon>
      <div>{{ meta.title || '' }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const router = useRouter();
const route = useRoute();

const meta = ref<any>({});
meta.value = route.meta;

watch(route, () => {
  meta.value = route.meta;
});

const goHome = () => {
  router.push('/');
};

const goPath = (res: any) => {
  router.push(res.url);
};
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 100%;
  height: 44px;
  background: #ffffff;
  .breadcrumb-bos {
    width: 1200px;
    font-size: 14px;
    color: #101828;
    .nav-list {
      height: 44px;
      display: flex;
      align-items: center;
      .like {
        cursor: pointer;
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
    .home {
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>