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