vue+element-ui的后台项目封装组件--面包屑的封装

最近项目打算重构，项目的模块几乎都是以后台查询展示的传统的增删改差模式，所以卑微的我想要自己封装一下tab，

子组件--可以添加icon的。

<template>
  <div id="bread">
    <div class="bread-title">
      <div
        v-for="(item, index) in breadlist"
        :key="index"
        class="bread-curry"
        @click="tab(index)"
        :class="[index == active ? 'active' : '']"
      >
        <span class="icon  bread-icon"></span>
        <span v-if="item.path" :to="{ path: '/' + item.path }">{{
          item.title
        }}</span>
        <span v-else>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    breadlist: {
      type: Array
    },
    title: {
      type: String
    },
    icon: {
      type: String
    },
    path: {
      type: String
    },
    active: {
      type: Number
    }
  },
  data() {
    return {};
  },
  methods: {
    tab(index) {
      this.$emit("tab", index);
    }
  }
};
</script>
<style lang="less" scoped>
// .bread-title {
//   height: 42px;
//   line-height: 42px;
// }
.bread-curry {
  display: inline-block;
  line-height: 42px;
  cursor: pointer;
  padding: 0 20px;
  color: #666666;
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
  border-radius: 3px 3px 0 0;
}
.bread-icon {
  width: 21px;
  height: 23px;
  margin-right: 5px;
  vertical-align: middle;
}
.active {
  color: #1a68b5;
  cursor: default;
  background-color: #e3edf7;
  border-bottom-color: transparent;
}
</style>

子组件创建完之后在父组件里面引入

  <flight-bread
      :breadlist="breadlist"
      :active="active"
      @tab="tab"
    ></flight-bread>
<script>
import flightBread from "@/components/flightBread.vue";
export default{
components: {
    flightBread,
  
  },
    data() {
        return {
          breadlist: [
            { title: "查询费率", path: "", id: 1 },
            { title: "费率设置", path: "", id: 2 },
            { title: "铺货特货码设置", path: "", id: 3 }
          ],
          active: 0,
        }
    },
     methods: {
         tab(childData) {
          this.active = childData;
    },
    }
}
</script>        

封装的这个tab面包屑只是在同一个页面控制显示隐藏，如果要跳转到其他页面的话，只需要在父组件传值那里添加path 的路径就可以，如果不跳转到其他的页面的话，path建议不设置这个字段，因为这个字段是控制子组件里面的to显示的，

卑微前端，记录自己的项目封装的组件，方便以后自己用，如果有哪里不合理，请各路大神多多指教。