First, let’s take a look at the official code for Element-UI:

Code:

<el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">Home page</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">Activity management</a></el-breadcrumb-item>
    <el-breadcrumb-item>List of activities</el-breadcrumb-item>
    <el-breadcrumb-item>Event details</el-breadcrumb-item> 
</el-breadcrumb>
Copy the code

Effect:

The official document provides static breadcrumb writing. In this way, breadcrumb must be written on each of the above 4 pages, and it is ok if there are few pages. If there are many pages, this is cumbersome to write and not scalable.

Write it under multi-level routing to make it dynamic:

Configure the route first:

{ 
    path:'/main'.name:'Main'.component:Main, 
    redirect: {name:'ItemList' }, 
    meta: {title:"My desk.".showInbreadcrumb:true 
},
Copy the code

Added meta along with title and showInbreadcrumb to the default route configuration

Title is used to configure the current page path for the breadcrumb display

The showInbreadcrumb is used to determine whether the title is displayed

Then on the breadcrumb page:

Bread crumbs:

<div class="breadcrumb" style="padding: 5px 0px 10px 0px"> 
    <el-breadcrumbseparator-class="el-icon-arrow-right"> 
        <el-breadcrumb-itemv-for="(item, index) in breadcrumb":key="index":to=" {path: item.path}"> {{ item.meta.title }} 
        </el-breadcrumb-item> 
    </el-breadcrumb> 
</div>
Copy the code

Get route configuration information:

computed:{ 
    routes(){ 
           return this.$router.options.routes.filter((item) = >{ 
                return item.meta.showInbreadcrumb 
           } 
       ); 
   }, 
    breadcrumb(){ 
            let matachedArr=this.$route.matched.filter((item) = >{ 
                return item.meta.showInbreadcrumb 
            }); 
        return matachedArr 
    } 
}
Copy the code

Now the hierarchical routing breadcrumbs are ready to be dynamic.

However, I ran into a problem. If I had a multi-level route, a page would be displayed on the breadcrumbs as a secondary route and rendered on the page as a tertiary route. Then you just need to configure the route like this:

{ 
    path:'/item/list'.name:'ItemList'.component: {render:h= >h('router-view')},
    redirect: {name:'ItemListSelf'}, 
    meta: {title:"List of Goods".showInbreadcrumb:true 
    }, 
    children:[ 
        { 
        path:'/item/list'.name:'ItemListSelf'.component:ItemList,
        meta: {title:"List of Goods".showInbreadcrumb:false}},Copy the code