el-breadcrumb面包屑详解

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.crumbs
        console.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