Vue中ElementUI后台管理系统面包屑el-breadcrumb

html

<template>
    <div class="myTitle">
        <div class="img">
            <!-- <img src="../../assets/LOOG.png" alt=""> -->
            LOOG
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{path: breadList.path}">
                        {{breadList.meta.title}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            breadList: [] // 路由集合
        };
    },
    watch: {
        $route () {
            this.getBreadcrumb();
        }
    },
    created(){
         this.getBreadcrumb();
    },
    methods: {
        getBreadcrumb(){
            console.log(this.$route.matched[1],'this.$route.matched;');
            this.breadList = this.$route.matched[1]
        }
    }
}
</script>

<style lang="scss" scoped>
.myTitle {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    .img {
        margin-left: 110px;
    }
    .breadcrumb {
        display: flex;
    }
}
</style>

router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Esercise from '../views/esercise.vue'




Vue.use(VueRouter)
// 导入admin子路由
import ChainManagement from '@/views/Home/chainManagement';
import TokenManagement from '@/views/Home/tokenManagement';
import VuePdf from '@/views/Home/vuePdf';



const routes = [{
        path: '/',
        redirect: '/'
    },
    {
        path: '/',
        name: 'Home',
        component: Home,
        children: [{
                path: '/chainManagement',
                component: ChainManagement,
                meta: {
                    title: '链管理'
                }
            },
            {
                path: '/tokenManagement',
                component: TokenManagement,
                meta: {
                    title: '代币管理'
                }
            },
            {
                path: '/vuePdf',
                name: 'VuePdf',
                component: VuePdf,
                meta: {
                    title: 'Pdf管理'
                }
            },
        ],

    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import( /* webpackChunkName: "about" */ '../views/About.vue')
    }, {
        path: '/esercise',
        name: 'Esercise',
        component: Esercise,
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

效果

参考

博主1
博主2
博主3

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！