本文使用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數值直接賦值給