vue+elementUI面包屑组件封装

一.选择用哪种样式

二.在组件文件夹下创建组件

三.在Bread.vue复制如下代码

<template>
  <!-- 面包屑 -->
  <div class="bread">
 <el-breadcrumb separator-class="el-icon-arrow-right">
 <el-breadcrumb-item v-for="(item, index) in fromFather" :key=index :to="{ path: '/' + item.path }">{{item.name}}</el-breadcrumb-item>

</el-breadcrumb>
</div>
</template>

<script>
export default {
   name: 'bread',
   props: ['fromFather']
}
</script>

<style lang="less">
.bread {
    background-color: #fff;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px #EFEFEF solid;
    box-sizing: border-box;
    box-shadow: 1px 2px 4px #BABABA;
    margin-bottom: 36px;
    .el-icon-arrow-right:before {
        color: #000;
    }
    .el-breadcrumb__item {
        font-size: 20px;
        line-height: 50px;
    }
    .el-breadcrumb__inner {
        cursor: pointer !important;
    }
}
</style>

四.在你需要的页面上应用

// html代码
<!-- 面包屑导航 -->
  <Bread :fromFather="dataPath"></Bread>
  
// js代码
import Bread from '../../../components/Bread.vue'  // 引入面包屑组件

export default {
  name: 'nicklist',
  components: {
    Bread // 注册面包屑组件
  },
  data() {
    return {
      dataPath: [
        {
          name: '课程',   // 名称,自定
          path: 'nicklist'  // 路由导航,自定
        },
        {
          name: '课程管理',
          path: 'nicklist'
        }
      ] // 面包屑数据
    }
  }
}

效果如图: