FE_occupationlab_client/src/components/breadcrumb/index.vue

<template>
  <!-- 面包屑 -->
  <div class="breadcrumb">
    <el-breadcrumb separator=">">
      <template v-for="(item, i) in routes">
        <el-breadcrumb-item v-if="i != routes.length - 1" :key="i">
          <span @click="to(item)">{{ item.name }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-else :key="i">
          {{ item.name }}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: {
    routes: {
      type: Array,
      required: true
    },
  },
  data () {
    return {};
  },
  methods: {
    to (item) {
      if (item) {
        this.$router.push(item.path)
      } else {
        this.$router.back()
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.breadcrumb {
  margin: 4px 0 16px;

  /deep/.el-breadcrumb__item {
    .el-breadcrumb__inner,
    .el-breadcrumb__separator {
      font-weight: 400;
      color: $main-color;
    }

    .el-breadcrumb__inner {
      cursor: pointer;
    }

    &:last-child {
      .el-breadcrumb__inner {
        color: #0b1d30;
        cursor: default;
      }
    }
  }
}
</style>