vue脚手架开发 + element实现简单的 面包屑导航

学习目标：

【快速实现 可复用 的基础面包屑导航 】

功能的实现启发于：

路由元信息相关优秀文章

具体代码体现：

面包屑结构部分：

      <div class="bd_nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
          这里就是受到上面文章的启发，在路由里面搞数据，通过 this.$route.meta 在当前页面拿到数据
            v-for="(item, i) in this.$route.meta"
            :key="i"
          >
          这里用 v-if 判断了一下， 如循环遍历的item 有 URL这个属性，那就可以直接跳，没有就是单纯的文字
            <router-link v-if="item.url" :to="item.url">{
    {
              item.name
            }}router-link>
            <span v-else>
              {
    { item.name }}
            span>
          el-breadcrumb-item>
        el-breadcrumb>
      div>

路由router——index.js

const routes = [
    //默认根路径
    {
     
        path: '/',
        name: 'defultPage',
        component:() => import('../views/SLAguanli/GuanLi.vue'),  
        给每一个路由实例都配置meta，数据就配置好了，渲染那边直接 v-for ——el-breadcrumb-item这个标签就行了
        meta:[
            {
     name:'首页'},
            {
     name:'SLA管理'},
            {
     name:'专线管理', url: '/' },
        ]
    },
    //SLA管理——专线管理
    {
     
        path: '/GuanLi',
        name: 'zhuanxianguanli',
        component:() => import('../views/SLAguanli/GuanLi.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'SLA管理'},
            {
     name:'专线管理', url: '/GuanLi' },
        ]
    },
    //SLA管理——云业务管理
    {
     
        path: '/YunYeWu',
        name: 'YunYeWu',
        component:() => import('../views/SLAguanli/YunYeWu.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'SLA管理'},
            {
     name:'云业务管理', url: '/YunYeWu' },
        ]
    },
    //SLA管理——IDC管理
    {
     
        path: '/IDC',
        name: 'IDC',
        component:() => import('../views/SLAguanli/IDC.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'SLA管理'},
            {
     name:'IDC管理', url: '/IDC' },
        ]
    },
    //SLA管理——无限业务管理
    {
     
        path: '/WuXian',
        name: 'WuXian',
        component:() => import('../views/SLAguanli/WuXian.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'SLA管理'},
            {
     name:'无限业务管理', url: '/WuXian' },
        ]
    },
    
    //专线客户管理
    {
     
        path: '/KeHu',
        name: 'zhuanxiankehu',
        component:() => import('../views/kehu/KeHu.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'客户档案管理', url: '/KeHu' },
            {
     name:'专线客户管理'},
        ]
        
    },
    //专线客户管理  详情
    {
     
        path: '/KeHuDet/:id',
        name: 'zhuanxiankehuDet',
        component:() => import('../views/kehu/KeHuDet.vue'), 
    },
    //专线客户质量管理
    {
     
        path: '/KeHuzlgl',
        name: 'zhuanxianKeHuzlgl',
        component:() => import('../views/kehu/KeHuzlgl.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'客户档案管理', url: '/KeHu' },
            {
     name:'专线客户质量管理', url: '/KeHuzlgl' },
        ]
    },
    //专线客户工单性能管理
    {
     
        path: '/KeHugdxngl',
        name: 'zhuanxianKeHugdxngl',
        component:() => import('../views/kehu/KeHugdxngl.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'客户档案管理', url: '/KeHu' },
            {
     name:'专线客户工单性能管理', url: '/KeHugdxngl' },
        ]
    },
    //专线客户工单性能管理  详情
    {
     
        path: '/KeHugdxnDet/:id',
        name: 'zhuanxianKeHugdxnDet',
        component:() => import('../views/kehu/KeHugdxnDet.vue'), 
    },
    //专线客户SLA管理
    {
     
        path: '/KeHuslagl',
        name: 'zhuanxianKeHuslagl',
        component:() => import('../views/kehu/KeHuslagl.vue'),
        meta:[
            {
     name:'首页'},
            {
     name:'客户档案管理', url: '/KeHu' },
            {
     name:'专线客户SLA管理', url: '/KeHuslagl' },
        ]
    }, 
]