Element UI动态实现面包屑导航~

思路：监听路由变化，在路由规则中添加meta然后在组件中渲染。

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {return originalPush.call(this, location).catch(err => err)
}const router = new VueRouter({routes:[{path:'/',redirect:'/welcome',},{path:'/home',name:'home',component:()=>import('../src/view/showIndex.vue'),meta:{title:'首页'},children:[{path:'/user',name:'user',component:()=>import('../src/view/user.vue'),meta:{title:'用户管理'}},{path:'/categroy',name:'categroy',component:()=>import('../src/view/categroy.vue'),meta:{title:'品类管理'}},{path:'/product',name:'product',component:()=>import('../src/view/product.vue'),meta:{title:'商品生产'}},{path:'/sex',name:'sex',component:()=>import('../src/view/sex.vue'),meta:{title:'角色管理'}},{path:'/welcome',name:'welcome',component:()=>import('../src/view/welcome.vue'),}]},{path:'/shang',name:'shang',component:()=>import('../src/view/showIndex.vue'),meta:{title:'商品'},children:[{path:'/user2',name:'user2',component:()=>import('../src/view/user2.vue'),meta:{title:'用户管理2'}},]},{path:'/login',name:'login',component:()=>import('../src/view/loginNews.vue')},
]
})
// 路由前置守卫
router.beforeEach((to,from,next) => {const token = localStorage.getItem("token")if(to.path ==='/login'){next()}else{if(token){next()}else{next('/login')}}})export default router

<template><div class="home"><!-- 首页 --><el-container><el-header><!-- 头部 --><showTop></showTop></el-header><el-container><el-aside width="200px;"><AsideLeft></AsideLeft></el-aside><el-main><!-- 面包屑导航 --><Breadcrumb></Breadcrumb><router-view></router-view></el-main></el-container></el-container></div>
</template><script>
import showTop from "../components/showTop.vue";
import AsideLeft from "../components/AsideLeft.vue";
import Breadcrumb from "../components/Breadcrumb.vue"
export default {name: "showIndex",components: {showTop,AsideLeft,Breadcrumb},
};
</script><style>
.el-header {background-color: #b3c0d1;color: #ffffff;text-align: center;line-height: 60px;background-color: rgb(60, 60, 60);
}.el-aside {background-color: rgb(60, 60, 60);color: #333;text-align: center;line-height: 200px;position: absolute;top: 60px;bottom: 0px;
}.el-main {background-color: #e9eef3;color: #333;text-align: center;line-height: 160px;position: absolute;top: 60px;left: 200px;right: 0;bottom: 0px;
}body > .el-container {margin-bottom: 40px;position: relative;
}
</style>

<template><!-- 面包屑导航 --><div><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-itemv-for="(item, index) in list":key="index":to="item.path">{{ item.title }}</el-breadcrumb-item></el-breadcrumb></div>
</template><script>
export default {name: "BreadCrumb",data() {return {list: [],};},mounted(){//   解决刷新面包屑消失问题if(localStorage.getItem('BreadCrumb')){this.list = JSON.parse(localStorage.getItem('BreadCrumb'))}},watch: {$route() {console.log("this.$route", this.$route);this.fn()},},methods: {fn() {this.list = [];const matched = this.$route.matched;matched.forEach((item) => {// 首页不需要面包屑导航if (this.$route.name == "welcome" || this.$route.name == "home") {return;}this.list.push({ title: item.meta.title, path: item.path });});//   解决刷新面包屑消失问题localStorage.setItem('BreadCrumb',JSON.stringify(this.list))},},
};
</script><style></style>