GCLS_Page_Learn/src/layouts/components/BreadCrumb.vue

<template>
  <div v-show="isShow" class="breadcrumb">
    <div class="breadcrumb-container">
      <router-link to="/">
        <svg-icon icon-class="homepage" />
      </router-link>
      <i class="el-icon-arrow-right" />
      <span v-for="item in routerList" :key="item.path">
        <span class="router-title">
          <template v-if="item.meta.link">
            <router-link :to="item.meta.link"> {{ $t(item.meta.title) }} </router-link>
          </template>
          <template v-else>
            {{ $t(item.meta.title) }}
          </template>
        </span>
        <i class="el-icon-arrow-right" />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BreadCrumb',
  data() {
    return {
      routerList: []
    };
  },
  computed: {
    isShow() {
      return this.routerList.length > 0;
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      this.routerList = this.$route.matched.filter(item => item.meta && item.meta.title);
      this.$emit('update:isShowNav', this.isShow);
    }
  }
};
</script>

<style lang="scss">
.breadcrumb {
  z-index: 999;
  width: 100%;
  height: 56px;
  line-height: 56px;
  background-color: #f6ecdd;

  &-container {
    width: $basic-width;
    min-width: $basic-width;
    height: 100%;
    padding: 15px 0;
    margin: 0 auto;
    font-weight: 700;
    line-height: 26px;
    color: #948e85;
    vertical-align: middle;

    &::before {
      display: inline-block;
      width: 6px;
      height: 100%;
      margin-right: 24px;
      vertical-align: bottom;
      content: '';
      background-color: $basic-color;
    }

    .el-icon-arrow-right {
      margin: 0 12px;
    }

    .router-title {
      cursor: pointer;
    }

    span:last-child {
      color: #000;

      .el-icon-arrow-right {
        display: none;
      }
    }
  }
}
</style>