封装面包屑

基于 element -ui 库 二次封装 面包屑

如果是只展示当前对应路由的这个面包屑

1.在router 中定义一个mate

因为父级也需要展示，所以这里 父级也需要配置mate属性

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import Main from '@/views/Main' 
import Cookies from 'js-cookie' 
Vue.use(VueRouter) 
const routes = [ 
{ path: '/login', name: 'login', component: () => import(/* webpackChunkName: "page" */ "@/views/LoginPage"), meta: { keepAlive: true, isTab: false, isAuth: false, }, },
{ path: '/404', name: '404', component: () => import(/* webpackChunkName: "page" */ '@/views/error/404'), hidden: true }, 
{ path: '/401', name: '401', component: () => import(/* webpackChunkName: "page" */ '@/views/error/401'), hidden: true },
{ path: '/', component: Main, name: 'Main', redirect: '/home', children: [ { path: 'home', component: () => import('@/views/Home'), name: '首页', meta: { title: '首页', noCache: true } }, { path: 'user', component: () => import('@/views/User'), name: '用户管理', meta: { title: '用户管理', noCache: true } }, 
{ path: 'guide', component: () => import('@/views/Guide'), name: '引导页', meta: { title: '引导页', noCache: true } }, ] }, { name: '权限测试页', component: Main, path:'/role1', redirect: '/role', meta: { title: '权限测试页', noCache: true }, children: [ { name: '页面权限', path: '/role', redirect: 'roleone', meta: { title: '页面权限', noCache: true }, children: [ { path: "roleone", component: () => import('@/views/role/RoleOne'), name: "菜单-1-1", meta: { title: '菜单-1-1', noCache: true }, }, 
{ path: "roletwo", component: () => import('@/views/role/RoleTwo'), name: "菜单-1-2", meta: { title: '菜单-1-2', noCache: true }, }, ] } ], }, { path: "*", redirect: "/404", }, ] 

const router = new VueRouter({ mode: 'hash', scrollBehavior: () => ({ y: 0 }), routes }) 

// 解决ElementUI报重复点击菜单错误
const originalPush = router.push router.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 

router.beforeEach((to, from, next) => { 
// 判断token 
const token = Cookies.get('Admin-Token') 
if (!token && to.name !== 'login') { next({ name: 'login' }) } 
else if (token && to.name == 'login') { next({ name: '首页' }) } else { next() } }) export 

default router

在页面中展示

需要写个方法

// 监听路由信息对象中的path属性 "$route.path"() { this.calcBreaks(); },
需要监听路由变化

<template> 
<div class="header-container"> 
<div class="l-content"> 
<!-- --> 
<el-button icon="el-icon-menu" size="mini" @click="handMenu"></el-button> 
<!-- 面包屑 --> 
<el-breadcrumb separator="/"> 
<el-breadcrumb-item v-for="item in levelList" :key="item.key" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item> 
</el-breadcrumb> 
</div> 
<div class="r-content"> 
<el-dropdown trigger="click" @command="handleCommand"> 
<span class="user"> 
<el-avatar icon="el-icon-user-solid"></el-avatar> 
</span> <el-dropdown-menu slot="dropdown"> 
<el-dropdown-item command="userInfo">个人信息</el-dropdown-item> 
<el-dropdown-item command="logout">退出</el-dropdown-item> 
</el-dropdown-menu> </el-dropdown> 
</div> 
</div> 
</template> 
<script> 
import { mapState, mapMutations } from 'vuex' 
import Cookies from 'js-cookie' 
export default { 
data() { 
return { 
levelList:[] 
} 
}, 
created() { 
// 执行计算面包屑路径函数 
this.calcBreaks(); 
}, 
methods: { 
...mapMutations(['cleanMenu']), 
handMenu() { 
this.$store.commit('CollapseMenu') 
}, 
handleCommand(command) { 
if (command == 'logout') { 
this.$store.dispatch('LogOut').then(res => {
// 清除cookie 
console.log('logout'); 
Cookies.remove('Admin-Token')
Cookies.remove('crumbList'); 
this.cleanMenu() 
this.$router.push('/login') 
})
} 
}, 
// 计算面包屑路径 
calcBreaks() { // let temp = [{ to: "/home", title: "首页" }]; 
let matched = this.$route.matched .filter((v) => v.meta.title) .map((v) => { return { to: v.path, title: v.meta.title }; }); this.levelList = [...matched]; }, }, 
watch: { 
// 监听路由信息对象中的path属性 
"$route.path"() {
this.calcBreaks(); 
}, 
}, 
computed: { } 
} 
</script> 
<style lang="scss" scoped> 
.header-container { 
padding: 0 20px; 
background-color: #333; 
height: 60px; 
display: flex; 
justify-content: space-between; 
align-items: center; 
.l-content { display: flex; 
flex-direction: row; align-items: center; 
.el-button--mini { margin-right: 10px; } } } 
:deep.el-breadcrumb__item { 
.el-breadcrumb__inner { 
font-weight: normal; 
&.is-link { 
color: #909496; 
} 
} 
&:last-child { 
.el-breadcrumb__inner { 
color: #fff; 
} 
} 
} 
</style>