element面包屑导航

 

利用meta路由元信息，通过this.$route.matched来获取

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

 

然后在首页中引入进来

 

路由文件

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