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
效果
参考
最后
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!