<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代碼
<!-- 面包屑導(dǎo)航 -->
? <Bread :fromFather="dataPath"></Bread>

// js代碼
import Bread from '../../../components/Bread.vue' ?// 引入面包屑組件

export default {
? name: 'nicklist',
? components: {
? ? Bread // 注冊(cè)面包屑組件
? },
? data() {
? ? return {
? ? ? dataPath: [
? ? ? ? {
? ? ? ? ? name: '課程', ? // 名稱,自定
? ? ? ? ? path: 'nicklist' ?// 路由導(dǎo)航,自定
? ? ? ? },
? ? ? ? {
? ? ? ? ? name: '課程管理',
? ? ? ? ? path: 'nicklist'
? ? ? ? }
? ? ? ] // 面包屑數(shù)據(jù)
? ? }
? }
}