Package assembly a simplified version of breadcrumbs

Directly on the component codes:

<template>
    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item v-for="item in levelList" :key="item.path">
                <span @click.prevent="handleLink(item)" style="cursor:pointer;">{{ item.meta.title }}</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
export default {
    data(){
        return {
            leavelList:null,
        }
    },
    watch: {
        $route(route) {
            this.getLeavelList();
        }
    },
    created(){
        this.getLeavelList()
    },
    methods:{
        getLeavelList(){
            var matched=this.$route.matched.filter(item => item.meta && item.meta.title);
            const first = matched[0];
            if (!this.isDashboard(first)) {
                matched = [{ name: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
            };
            this.levelList = matched;
        },
        isDashboard(route) {//判断是不是首页
            const name = route && route.name
            if (!name) {
                return false
            }
            return name.trim().toLocaleLowerCase() === ' The Dashboard ' .toLocaleLowerCase () 
        }, 
        handleLink (Item) { 
            const {name} = Item;
             IF (name === ' / Dashboard ' ) { // because a name is First it is determined if the path is a path to home Jump embodiment 
                the this $ router.push ({path: name}).
                 return ; 
            } 
            the this . $ router.push ({name: name}) 
        } 
    } 
} 
</ Script > 

< style > 
</ style >

The introduction of ways:

Introduction:

import TestBreadcrumb from "@/components/testBreadcrumb";

Registration subcomponents:

components:{
    TestBreadcrumb
  },

Use page:

<TestBreadcrumb></TestBreadcrumb>

statement:

This component has a requirement for routing, routing configuration routes have meta meta information

like this:

{
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      }