利用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