uk_front/components/Breadcrumb.vue

<template>
  <div class="wrap">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item  @click.native="goCategory()">All</el-breadcrumb-item>
      <el-breadcrumb-item
        v-for="(item, index) in comCategoryList"
        :key="item.id"
        @click.native="goCategory(index)"
        >{{ item.name }}</el-breadcrumb-item>
      <el-breadcrumb-item class="last-bread">{{ pageData.product_code }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: {
    pageData: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    comCategoryList() {
      let arr = [];
      this.recursive(arr, this.pageData.category_list);
      return arr;
    },
  },
  methods: {
    recursive(arr = [], obj) {
      let temp = {};
      temp.id = obj.id ? obj.id : null;
      temp.name = obj.name ? obj.name : null;
      temp.pid = obj.pid ? obj.pid : null;
      arr.push(temp);
      if (obj.child) {
        this.recursive(arr, obj.child);
      }
    },
    goCategory(index) {
      switch (index) {
        case 0:
          this.$router.push({
            name: "category-firstCategory",
            params: {
              firstCategory: this.comCategoryList[0].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
            },
          });
          break;
        case 1:
          this.$router.push({
            name: "category-firstCategory-secondCategory",
            params: {
              firstCategory: this.comCategoryList[0].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
              secondCategory: this.comCategoryList[1].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
            },
          });
          break;

        case 2:
          this.$router.push({
            name: "category-firstCategory-secondCategory-thirdCategory",
            params: {
              firstCategory: this.comCategoryList[0].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
              secondCategory: this.comCategoryList[1].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
              thirdCategory: this.comCategoryList[2].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase()
            },
          });
          break;

          default:
          this.$router.push({ path: '/category' })

      }
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  margin-bottom: 15px;
  margin-top: 21px;
}

</style>