<template>
  <div class="bread_container" id="bread_container">
    <el-breadcrumb class="breadcrumb" separator="/">
      <el-breadcrumb-item v-for="(title, index) in matchedArr" :key="index">
        {{ title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      isCollapse: false
    };
  },
  //监听属性 类似于data概念
  computed: {
    matchedArr() {
      let temp = [],
        temps = [];
      this.$route.matched.filter((item, index, self) => {
        if (item.meta.title) {
          const title = item.meta.title;
          temp.push(title);
        }
      });
      temp.filter((item, index, self) => {
        if (!temps.includes(item)) {
          temps.push(item);
        }
      });
      return temps;
    }
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //方法集合
  methods: {}
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.bread_container {
  background-color: #eaebec;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  .bars {
    float: left;
    margin: 0px 10px;
    cursor: pointer;
  }
  .breadcrumb {
    height: 30px;
    line-height: 30px;
    .breadbutton {
      float: left;
      margin: 4px 5px 0 0;
    }
  }
}
</style>
