vuecli4+elementui實現面包屑

本文使用watch監聽路由信息對象$route動態改變面包屑
參數separator設置間隔符號

//elementui面包屑原始結構
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活動管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活動列表</el-breadcrumb-item>
  <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>

watch監聽路由信息對象$route動態改變面包屑

1、路由配置修改代碼

給路由添加meta屬性

{
    path: '/main',
    name: 'main',
    meta: { title: '首頁' },
    component: () => import('../views/Main.vue'),
    children:[
         {
             path:'/main/teachermain',
             name:'teachermain',
             meta:{title:'教師主頁'},
             component:()=>import('./teachermain.vue')
         },{
             path:'/main/teacherschool',
             name:'teacherschool',
             meta:{title:'校區管理'},
             component:()=>import('./teacherschool.vue')
         }
    ]
}

2、需要引入面包屑的頁面使用watch監聽

等待得到一個數組，包含meta數據

watch監聽路由信息對象，獲取this.$route.matched內部的meta數據

路由信息對象中的matched是一個數組包含路由從上往下的meta數值直接賦值給

  學無止境，感興趣的話關注下面公眾號，咱們一起交流