<!--
 * @Author: haoqiuzhi
 * @Date: 2022-05-16 18:09:09
 * @LastEditors: haoqiuzhi
 * @LastEditTime: 2022-06-22 11:26:53
 * @Description: 默认获取title，如果需要自定义的话调用 ...mapMutations('layout', ['setTitleName'])
-->
<template>
  <div class="bread-crumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <span class="layout-title-name">所在位置: 操作台</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in routers" :key="item.path" :to="{ path: item.path }">
        <span :class="{ red: index === routers.length - 1 }" class="layout-title-name">{{ item.meta.title }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routers: []
    }
  },
  watch: {
    $route(to, from) {
      this.routers = to.matched.slice(1)
    }
  }
}
</script>
<style lang="scss" scoped>
.bread-crumb {
  margin: 15px 0 10px 0;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  line-height: 20px;
  .layout-title-name {
    min-width: 56px;
    margin-left: 8px;
  }

  .red {
    color: #dc1a36;
  }
}
</style>
