el-breadcrumb面包屑详解

封装面包屑组件

<template><div class="crumb"><el-breadcrumb separator="/"><template v-for="(item,index) in levelList"><el-breadcrumb-item :key="'item_' + index">{{item.name}}</el-breadcrumb-item></template></el-breadcrumb></div>
</template><script>
export default {data() {return {levelList: [],}},mounted() {this.getCrumb()},methods: {getCrumb() {console.log(this.$route.meta, 'this.$route.meta');if (this.$route.meta && this.$route.meta.crumbs) {this.levelList = this.$route.meta.crumbsconsole.log(this.levelList, 'this.levelList');}},}
}
</script><style lang="scss" scoped>
.crumb {height: 30px;line-height: 30px;margin: 20px 30px;
}
//设置最后一级的面包屑颜色
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{
color: #2386ee;
}
</style>

组件中使用

<template><div class="home"><Crumb/>我是首页</div>
</template><script>
import Crumb from '@/components/crumbCom.vue'
export default {name: 'HomeView',components:{Crumb},
}
</script>

路由配置

如果是一级菜单，crumbs中只有一个对象，name就是自己的菜单名称

效果如下

如果是二级菜单，crumbs中就是两个对象，第一个对象的名称是自己的一级菜单名称，第二个对象的名称就是自己的名称，路径都是当前页面的路径

效果如下

三次四级依此类推

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import HeaderView from '../components/HeaderView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',meta:{title:'首页',crumbs:[{path:'',name:'首页'}],},components:{header:HeaderView,default:HomeView},},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},//登录{path: '/login',name: 'Login',component: () => import('@/views/loginView.vue')},// 用户管理{path: '/user',name: 'User',meta:{title:'用户管理',crumbs:[{path:'/user',name:'系统管理'},{path:'/user',name:'用户管理'}],},components:{header:HeaderView,default:() => import('@/views/system/userView.vue')},},// 角色管理{path: '/role',name: 'Role',meta:{title:'角色管理',crumbs:[{path:'/role',name:'系统管理'},{path:'/role',name:'角色管理'}],},components:{header:HeaderView,default:() => import('../views/system/roleView.vue')},},// 组织机构管理{path: '/dept',name: 'Dept',meta:{title:'组织机构管理',crumbs:[{path:'/dept',name:'系统管理'},{path:'/dept',name:'组织机构管理'}],},components:{header:HeaderView,default:() => import('../views/system/deptView.vue')},},// 飞行器管理{path: '/plane',name: 'Plane',meta:{title:'飞行器管理',crumbs:[{path:'/plane',name:'基础数据'},{path:'/plane',name:'飞行器管理'}],},components:{header:HeaderView,default:() => import('../views/plane/planeView.vue')},},// 机型管理{path: '/planeType',name: 'PlaneType',meta:{title:'机型管理',crumbs:[{path:'/planeType',name:'基础数据'},{path:'/planeType',name:'机型管理'}],},components:{header:HeaderView,default: () => import('../views/plane/planeType.vue')},},// 空域管理{path: '/airSpace',name: 'AirSpace',meta:{title:'空域管理',crumbs:[{path:'/airSpace',name:'基础数据'},{path:'/airSpace',name:'空域管理'}],},components:{header:HeaderView,default:  () => import('../views/airspaceLine/airSpace.vue')},},// 航线管理{path: '/line',name: 'Line',meta:{title:'航线管理',crumbs:[{path:'/line',name:'基础数据'},{path:'/line',name:'航线管理'}],},components:{header:HeaderView,default: () => import('../views/airspaceLine/lineView.vue')},},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router