前言

是这样的，公司前端项目是用cube-ui的，有些功能cube-ui并没有，比如面包屑，这是需要自己定义一个，在此做个记录。

一、实现效果

二、功能实现

子组件

html

<template>
    <div class="bread-crumbs">
      <span v-for="(index,i) in current" :key="index">
        <span v-if="current.length < 2" class="bread-crumbs-highlight" @click="click(currentClick[i])">
          {{index}}
        </span>
        <span v-else-if="i === current.length-1" class="bread-crumbs-highlight" @click="click(currentClick[i])">
          {{index}}
        </span>
        <span v-else @click="click(currentClick[i])">
          {{index}} ->
        </span>
      </span>
    </div>
</template>

js

<script>
import emptyUtil from '@/utils/emptyUtil'
export default {
  props: {
    current: { type: Array, default: [] },
    currentClick: { type: Array, default: [] }
  },
  methods: {
    click (data) {
      if (emptyUtil.stringIsNotBlank(data)) {
        this.$router.push({name: data})
      }
    }
  }
}
</script>

css

<style scoped>
.bread-crumbs {
  width: 100%;
  background: #fff;
  text-align: left;
  padding-left: 0.2rem;
  float: left;
}
.bread-crumbs-highlight {
  color: #fe7d2d;
}
</style>

父组件（简写使用）

html

<template>
  <!-- 使用子组件(current指面包屑的label，currentClick值跳转的路由，需要一一对应) -->
  <breadCrumbs :current="currentBreadCrumbs" :currentClick="currentClick"></breadCrumbs>
</template>

js

<script>
// 导包
import breadCrumbs from '@/components/bread_crumbs'
export default {
  name: 'FenoAppR1DeviceList',
  // 子组件
  components: {
    breadCrumbs
  },
  data () {
    return {
      currentBreadCrumbs: ['设备设置', '设备升级', 'R1软件管理'],
      currentClick: ['DeviceSwitchList', 'DeviceUpgradeList'],
    }
  }
}
</script>

总结(重点)

在写的文章的过程中，突然发现设计不足的地方可以优化，传参可以传一个List对象就行了，比如：{label: ‘首页’, value: ‘index’},{label: ‘首页1’, value: ‘index1’}，根据自己的需求设计的，如果不满足你的需求可以参考其他大佬的文章。