How does vue write bread crumbs?

the problem now is that my route is not a nested route, how to show bread crumbs:

{
                  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"},
                  ]
              }
              
              

as shown in the picture, my bread crumbs can only be made into manageMain-xxxx,. The routing in my children can only be juxtaposed. How can I make it like this:
manageMain-regional_management_list-patient_detail?
also displays the contents of the parent component if nested.


there is a saying that it is not sweet to snatch a twist. Now that you have found the problem, because the routes are all juxtaposed, you should try to reconstruct the routes to a progressive relationship.

if you don't want to ReFactor, record a stack of routing objects globally and maintain them manually.


you can make a mapping table
such as

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

nav[this.$route.path]

 { 
    path: '/regional_management_list',
    component: regional_management_list, 
    name: 'regional_management_list',
    
    // meta ,meta.breadcrumb 
    meta:{
        breadcrumb:[
            {path:'/regional/regional_management_list',label:''}
            // ...
        ]
   }
},
Menu