Realize breadcrumb function based on vue-router's matched

const routes = [
 //Match empty route and redirect to root route {
        path:'',
        redirect: '/home',
        meta:{
            showInbreadcrumb:false
        }
    },
    //Root route {
        path:'/home',
        component: ()=>import('@/views/layout/index.vue'),
        name:'home',
        meta:{
            title:"Home",
            showInbreadcrumb:true
        }
    },
    //Electronic digital {
        path:'/electronics',
        name:'Electronic Digital',
        component: ()=>import('@/views/layout/index.vue'),
        redirect: '/electronics/computer',
        meta:{
            title:"Electronic Digital",
            showInbreadcrumb:true
        },
        children:[
            {
                path:'computer',
                name:'computer',
                component()=>import('@/views/electronics/children/computer/index.vue'),
                meta:{
                    title:"Computer",
                    showInbreadcrumb:true
                }
            },
            {
                path:'phone',
                name:'Mobile phone',
                component: ()=>import('@/views/electronics/children/phone/index.vue'),
                meta:{
                    title:"Mobile Phone",
                    showInbreadcrumb:true
                }
            },
            {
                path:'tv',
                name:'TV',
                component: ()=>import('@/views/electronics/children/tv/index.vue'),
                meta:{
                    title:"TV",
                    showInbreadcrumb:true
                }
            }
        ]
    },
    //Clothing, shoes and hats {
        path:'/clothing',
        name:'Clothing, shoes and hats',
        component: ()=>import('@/views/layout/index.vue'),
        redirect: '/clothing/tops',
        meta:{
            title: "Clothing, Shoes and Hats",
            showInbreadcrumb:true
        },
        children:[
            {
                path:'tops',
                name:'Tops',
                component: ()=>import('@/views/clothing/children/tops/index.vue'),
                meta:{
                    title:"Tops",
                    showInbreadcrumb:true
                }
            },
            {
                path:'lower',
                name:'Bottoms',
                component: ()=>import('@/views/clothing/children/lower/index.vue'),
                meta:{
                    title:"Bottoms",
                    showInbreadcrumb:true
                }
            },
            {
                path:'shoes',
                name:'shoes',
                component: ()=>import('@/views/clothing/children/shoes/index.vue'),
                meta:{
                    title:"shoes",
                    showInbreadcrumb:true
                }
            }
        ]
    },
    //Put it at the end. When all the previous routes are not matched, this route will be matched and redirected to the root route {
        path:'*',
        redirect:'/',
        meta:{
            showInbreadcrumb:false
        } 
    },   
]

///src/views/layout/index.vue
<template>
    <div class="layout">
        <!-- Side navigation bar -->
        <div class="sideMenu">
            <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                >
                    <div v-for="(item,index) in routes" :key="index" :index="index+''">
                        <!-- No secondary menu -->
                        <el-menu-item :index="index+''" v-if="!item.children">
                            <router-link :to="{name:item.name}">{{item.meta.title}}</router-link>
                        </el-menu-item>
                        <!-- With secondary menu -->
                        <el-submenu :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-menu-item>
                        </el-submenu>
                    </div>
            </el-menu>
        </div>
        <div class="content">
            <!-- Breadcrumbs -->
            <div class="breadcrumb">
                <el-breadcrumb separator-class="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 exit -->
            <router-view></router-view>
        </div>
    </div>
</template>

export default {
    data(){
        return {
        }
    },
    computed:{
        // Side navigation data routes(){
            // Get all routing information from $router.options and filter return this.$router.options.routes.filter((item)=>{
                return item.meta.showInbreadcrumb
            });
        },
        // Breadcrumb data breadcrumb(){
            // Filter according to the showInbreadcrumb field in the route configuration meta let matchedArr = this.$route.matched.filter((item)=>{
                return item.meta.showInbreadcrumb}
            );
            // Because the home page is special, it must always be displayed first in the breadcrumbs. If there is no home page routing information, manually add it to the front if (matchedArr [0].meta.title !== 'Home Page') {
                matchedArr.unshift(
                    {
                        path:'/home',
                        meta:{  
                            title:"Home",
                            showInbreadcrumb:true
                        }
                    },
                )
            }
            return matchedArr;
        },
    }
}