<template>
  <!-- 面包屑 -->
  <div class="breadcrumb">
    <el-breadcrumb separator=">">
      <template v-for="(item, index) in pages">
        <el-breadcrumb-item
          v-if="index != pages.length - 1"
          :key="index"
          :to="{ path: route }">
          {{item}}
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-else
          :key="index">
          {{item}}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
    props: {
      data: {
        type: String,
        required: true
      },
      route: {
        type: String,
        default: 'list'
      }
    },
    data() {
      return {
        pages: this.data.split('/'),
        curRoute: this.$route.path
      };
    },
    methods: {
      update(data){
        this.pages = data.split('/')
      }
    }
};
</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>