vue怎么写面包屑？

Question

现在遇到的问题是我的路由不是嵌套路由，怎么展示面包屑：

{
                  path: '/manageMain',
                  component: manageMain,
                  name: 'manageMain',
                  children: [
                      { path: '/regional_management_list',component: regional_management_list, name: 'regional_management_list'},
                      { path: '/patient_detail',component: patient_detail, name: 'patient_detail'},
                      { path: '/hospitalization_record',component: hospitalization_record, name: 'hospitalization_record'},
                      { path: '/outpatient_records',component: outpatient_records, name: 'outpatient_records'},
                      { path: '/patient_list_manage',component: patient_list_manage, name: 'patient_list_manage'},
                      { path: '/institutions_list',component: institutions_list, name: 'institutions_list'},
                      { path: '/add_hospital',component: add_hospital, name: 'add_hospital'},
                      { path: '/updateHospital',component: add_hospital, name: 'updateHospital'},
                      { path: '/doctor_list',component: doctor_list,name: 'doctor_list'},
                      { path: '/doctor_detail',component: doctor_detail, name: 'doctor_detail'},
                      { path: '/service_record_list',component: service_record_list, name: 'service_record_list'},
                      { path: '/medication_history_detail_total',component: medication_history_detail_total, name: 'medication_history_detail_total'},
                      { path: '/medication_history_detail_patient',component: medication_history_detail_total, name: 'medication_history_detail_total'},
                      { path: '/dataChart',component: dataChart, name: 'dataChart'},
                  ]
              }
              
              

如图，我的面包屑只能做成manageMain-xxxx，我children里面的路由只能是并列关系，如何才能做成这种：
manageMain-regional_management_list-patient_detail？
如果嵌套的话还会显示父组件的内容。。。

Answer 1

 { 
    path: '/regional_management_list',
    component: regional_management_list, 
    name: 'regional_management_list',
    
    // 添加meta属性，随你自定义 ,监听路由变化，将当前页面的meta.breadcrumb 取出来遍历，每一项就是面包屑的每一级
    meta:{
        breadcrumb:[
            {path:'/regional/regional_management_list',label:'标题'}
            // 可以随便添加...
        ]
   }
},

Answer 2

有句话怎么讲来着，抢扭的瓜不甜，既然你已经发现问题所在，是因为路由都是并列关系，那就应该尝试把路由重构为递进关系的呀。

如果不想重构，就全局记录一个路由对象的栈吧，然后手动维护好了。

Answer 3

可以做一个映射表
比如

const nav = {
    '/patient_detail':[
        'manageMain',
        'regional_management_list'
    ]
}

nav[this.$route.path]