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顯示的，

卑微前端，記錄自己的項目封裝的組件，方便以后自己用，如果有哪里不合理，請各路大神多多指教。