Realisieren Sie die Breadcrumb-Funktion basierend auf den Matched-Daten des Vue-Routers

const Routen = [
 //Leere Route abgleichen und zur Root-Route umleiten {
        Weg:'',
        Umleitung: '/home',
        Meta:{
            showInbreadcrumb:false
        }
    },
    //Stammroute {
        Pfad: „/home“,
        Komponente: ()=>import('@/views/layout/index.vue'),
        Name: 'Heimat',
        Meta:{
            Titel:"Home",
            showInbreadcrumb:true
        }
    },
    //Elektronisch digital {
        Pfad: '/Elektronik',
        Name:'Elektronisch Digital',
        Komponente: ()=>import('@/views/layout/index.vue'),
        Weiterleitung: '/elektronik/computer',
        Meta:{
            Titel:"Elektronisch Digital",
            showInbreadcrumb:true
        },
        Kinder:[
            {
                Pfad: „Computer“,
                Name: 'Computer',
                Komponente()=>Import('@/views/electronics/children/computer/index.vue'),
                Meta:{
                    Titel:"Computer",
                    showInbreadcrumb:true
                }
            },
            {
                Pfad: „Telefon“,
                Name: „Mobiltelefon“,
                Komponente: ()=>import('@/views/electronics/children/phone/index.vue'),
                Meta:{
                    Titel:"Mobiltelefon",
                    showInbreadcrumb:true
                }
            },
            {
                Pfad: „tv“,
                Name:'Fernseher',
                Komponente: ()=>import('@/views/electronics/children/tv/index.vue'),
                Meta:{
                    Titel:"Fernseher",
                    showInbreadcrumb:true
                }
            }
        ]
    },
    //Kleidung, Schuhe und Hüte {
        Pfad: '/Kleidung',
        Name:'Kleidung, Schuhe und Hüte',
        Komponente: ()=>import('@/views/layout/index.vue'),
        Weiterleitung: '/Kleidung/Oberteile',
        Meta:{
            Titel: "Kleidung, Schuhe und Hüte",
            showInbreadcrumb:true
        },
        Kinder:[
            {
                Pfad: „tops“,
                Name:'Oberteile',
                Komponente: ()=>import('@/views/clothing/children/tops/index.vue'),
                Meta:{
                    Titel:"Oberteile",
                    showInbreadcrumb:true
                }
            },
            {
                Pfad: „unterer“,
                Name:'Unterteile',
                Komponente: ()=>import('@/views/clothing/children/lower/index.vue'),
                Meta:{
                    Titel:"Unterteile",
                    showInbreadcrumb:true
                }
            },
            {
                Pfad: „Schuhe“,
                Name: 'Schuhe',
                Komponente: ()=>import('@/views/clothing/children/shoes/index.vue'),
                Meta:{
                    Titel: „Schuhe“,
                    showInbreadcrumb:true
                }
            }
        ]
    },
    //Setze es ans Ende. Wenn keine der vorherigen Routen übereinstimmt, wird diese Route übereinstimmen und zur Stammroute umgeleitet {
        Weg:'*',
        umleiten:'/',
        Meta:{
            showInbreadcrumb:false
        } 
    },   
]

///src/views/layout/index.vue
<Vorlage>
    <div Klasse="Layout">
        <!-- Seitliche Navigationsleiste -->
        <div Klasse="Seitenmenü">
            <el-Menü
                Standardmäßig aktiv = "0"
                Klasse="el-menu-vertical-demo"
                >
                    <div v-for="(item,index) in routes" :key="index" :index="index+''">
                        <!-- Kein sekundäres Menü -->
                        <el-menu-item :index="index+''" v-if="!item.children">
                            <router-link :to="{name:item.name}">{{item.meta.title}}</router-link>
                        </el-Menüelement>
                        <!-- Mit sekundärem Menü -->
                        <el-Untermenü :index="index+''" v-else>
                            <template slot="title">{{item.meta.title}}</template>
                            <el-menu-item v-for="(item_,index_) in item.children" :key="index_" :index="index+'-'+index_">
                                <router-link :to="{name:item_.name}">{{item_.meta.title}}</router-link>
                            </el-Menüelement>
                        </el-Untermenü>
                    </div>
            </el-Menü>
        </div>
        <div Klasse="Inhalt">
            <!-- Brotkrümel -->
            <div Klasse="Brotkrümel">
                <el-breadcrumb-Trennzeichen-Klasse="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- Routing-Ausgang -->
            <Router-Ansicht></Router-Ansicht>
        </div>
    </div>
</Vorlage>

Standard exportieren {
    Daten(){
        zurückkehren {
        }
    },
    berechnet:{
        // Seitennavigation Datenrouten(){
            // Alle Routing-Informationen aus $router.options abrufen und filtern. Return this.$router.options.routes.filter((item)=>{
                return item.meta.showInbreadcrumb
            });
        },
        // Breadcrumb-Daten breadcrumb(){
            // Filtern Sie gemäß dem Feld „showInbreadcrumb“ im Meta der Routenkonfiguration. let matchedArr = this.$route.matched.filter((item)=>{
                return item.meta.showInbreadcrumb}
            );
            // Da die Startseite etwas Besonderes ist, muss sie in den Breadcrumbs immer zuerst angezeigt werden. Wenn keine Routing-Informationen zur Startseite vorhanden sind, fügen Sie diese manuell vorne hinzu, wenn (matchedArr [0].meta.title !== 'Startseite') {
                matchedArr.unshift(
                    {
                        Pfad: „/home“,
                        Meta:{  
                            Titel:"Home",
                            showInbreadcrumb:true
                        }
                    },
                )
            }
            gib matchedArr zurück;
        },
    }
}