element面包屑導航

 

利用meta路由元信息，通過this.$route.matched來獲取

<!--面包屑導航-->
<template>
    <div class="breadcrumb">
        <div class="breadcrumb-item">
            <el-breadcrumb separator-class="el-icon-arrow-left">
                <transition-group name="breadcrumb">
                    <el-breadcrumb-item v-for="item in list" :key="item.path + item.name">
                        <router-link to="item">{{item.meta.breadcrumb}}</router-link>
                    </el-breadcrumb-item>
                </transition-group>
            </el-breadcrumb>
        </div>
    </div>
</template>

name: 'Breadcrumb',
    data() {
        return { }
    },
    computed: {
        list() {
            return this.$route.matched
        }
    }

 

然后在首頁中引入進來

<div class="page-wrapper">
        <page-header class="page-header"/>
        <div class="container-main">
            <my-menu></my-menu>
            <div class="page-body content-box" :class="{'content-collapse':collapse}">
                <!-- <page-tags></page-tags> -->
                <div class="scontent">
                    <Breadcrumb style="background-color: #FFFFFF"></Breadcrumb>
                    <transition name="move" mode="out-in">
                        <keep-alive :include="tagsList">
                            <router-view></router-view>
                        </keep-alive>
                    </transition>
                </div>
            </div>
        </div>
        <page-footer class="page-footer"/>
    </div>

 

路由文件

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/panelPage'
    },
    {
      path: '/homePage',
      name: 'homePage',
      component: () => import('../views/homePage'), //初始頁
      // component: HomePage,
      children: [
        {
          path: '',
          component: () => import('../views/panelPage')
        },
        {
          path: '/panelPage',
          name: 'panelPage',
          meta: {
            breadcrumb: '主頁'
          },
          component: () => import('../views/panelPage') //主頁
        },
        {
          path: '/personInfo',
          name: 'personInfo',
          meta: {
            breadcrumb: '信息化人員信息網'
          },
          component: () => import('../views/organizeInfoNet/personInfo/personInfo') //信息化人員信息網
        },
        {
          path: '/organChart',
          name: 'organChart',
          meta: {
            breadcrumb: '組織結構分布圖'
          },
          component: () => import('../views/organizeInfoNet/organChart/organChart') //組織結構分布圖
        },
        {
          path: '/projectInfo',
          name: 'projectInfo',
          meta: {
            breadcrumb: '項目應用信息台賬'
          },
          component: () => import('../views/organizeInfoNet/projectInfo/projectInfo') //項目應用信息台賬
        },
        {
          path: '/jobInfo',
          name: 'jobInfo',
          meta: {
            breadcrumb: '崗位職責信息網'
          },
          component: () => import('../views/organizeInfoNet/jobInfo/jobInfo') //崗位職責信息網
        },
        {
          path: '/regularWarning',
          name: 'regularWarning',
          meta: {
            breadcrumb: '定期維護預警'
          },
          component: () => import('../views/organizeInfoNet/regularWarning/regularWarning') //定期維護預警
        },
        {
          path: '/resourceNet',
          name: 'resourceNet',
          meta: {
            breadcrumb: '資源網'
          },
          component: () => import('../views/resourcePolicyNet/resourceNet/resourceNet') //資源網
        },
        {
          path: '/resourceChart',
          name: 'resourceChart',
          meta: {
            breadcrumb: '資源分布圖'
          },
          component: () => import('../views/resourcePolicyNet/resourceChart/resourceChart') //資源分布圖
        },
        {
          path: '/dockingList',
          name: 'dockingList',
          meta: {
            breadcrumb: '高端對接清單'
          },
          component: () => import('../views/resourcePolicyNet/dockingList/dockingList') //高端對接清單
        },
        {
          path: '/postTask',
          name: 'postTask',
          meta: {
            breadcrumb: '崗位任務'
          },
          component: () => import('../views/workList/postTask/postTask') //崗位任務
        }
      ]
    }
  ]
})

export default router