FE_huoran_client/src/components/breadcrumb/index.vue

<template>
  <!-- 面包屑 -->
  <div class="breadcrumb">
    <el-breadcrumb separator=">">
      <template v-for="(item, i) in data">
        <el-breadcrumb-item v-if="i != data.length - 1" :key="i"
          :to="{ path: item.path || '/column', query: item.query }">
          {{ item.name | i18nName($i18n) }}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-else :key="i">
          {{ item.name }}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return {

    };
  },
  methods: {

  },
  filters: {
    i18nName (name, type) {
      switch (name) {
        case '专利':
          return type.t('column.patent')
        case '专著':
          return type.t('column.monograph')
        case '论文':
          return type.t('column.paper')
        case '科学研究':
          return type.t('column.scientificResearch')

        default:
          return name
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.breadcrumb {
  margin: 4px 0 16px;

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

    &:last-child {
      .is-link {
        color: #0B1D30;
      }
    }
  }
}
</style>