<template>
  <div class="app-breadcrumb" v-if="routes.length">
    <el-breadcrumb>
      <el-breadcrumb-item v-for="route in routes" :key="route.path">
        <router-link :to="route.path">{{ route.meta.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: 'AppBreadcrumb',
  computed: {
    routes() {
      return this.$route.matched.filter(route => route.meta.title)
    }
  }
}
</script>
<style lang="scss">
.app-breadcrumb {
  padding: 18px 0 32px;

  .el-breadcrumb {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }
  .el-breadcrumb__inner a {
    font-weight: normal;
    color: #5b91fd;
  }
  .router-link-active {
    color: #1a1b1c;
  }
}
</style>
