【通过el-breadcrumb实现动态面包屑】
一:通过el-breadcrumb实现动态面包屑,通过路由的path决定展示的导航;
这是引用的./sidebarConfig的js文件(侧导航栏的路由path);
export default {
menuList: [
{
index: '/home',
title: 'home.modelManagement',
icon: 'icon-shouye'
},
{
index: '/computingPower',
title: 'home.microservices',
icon: 'icon-jichengkaifa'
},
{
index: 'modelTraining',
title: 'DI.distributedModeling',
icon: 'icon-moxingshu',
subs: [
{
index: '/experiment',
title: 'home.experimentList'
},
{
index: '/expExeRecord',
title: 'home.expExecutRecord'
},
{
index: '/jobExeRecord',
title: 'home.taskExecutRecord'
}
]
},
]
}
二:完整代码
这是 labelArr
<template>
<el-row class="breadcrumb">
<el-col :span="21">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-for="(item,index) of labelArr"
:key="index"
:to="item.path?item.path:''">{{$t(item.title)}}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :span="3"
class="operate-btn">
<slot></slot>
</el-col>
</el-row>
</template>
<script>
import { Breadcrumb, BreadcrumbItem } from 'element-ui'
import sidebarConfig from './sidebarConfig'
export default {
components: {
ElBreadcrumb: Breadcrumb,
ElBreadcrumbItem: BreadcrumbItem
},
data () {
return {
labelArr: []
}
},
mounted () {
const breadcrumbArr = window.sessionStorage.getItem('breadcrumbArr')
console.log(breadcrumbArr); //[{"title":"home.modelManagement"},{"title":"home.modelManagement","path":"/home"},{"title":"modelList.versionList","path":"/model/versionList/418"}]
if (breadcrumbArr) {
this.labelArr = window.JSON.parse(breadcrumbArr)
}
this.getPath()
},
methods: {
getPath () {
const path = this.$route.path
console.log(path); // /model/versionList/418
// 如果this.labelArr最后一个对象path等于this.$route.path则是页面更新
if (this.labelArr[this.labelArr.length - 1] === path) {
return
}
let pathArr = path.split('/').splice(1)
let startIndex = 1
console.log(pathArr);
if (pathArr[0] === 'manage' || pathArr[0] === 'model') {
startIndex = 2
}
if (pathArr.length - 1 >= startIndex) {
let existIndex = -1
for (let i = startIndex - 1; i < this.labelArr.length; i++) {
if (this.labelArr[i].path === path) {
existIndex = i
return
}
}
if (existIndex === -1) {
this.labelArr.push({ title: this.$route.meta.title, path: path })
} else {
this.labelArr = this.labelArr.splice(0, existIndex + 1)
}
this.setBreadcrumbArr(this.labelArr)
} else {
this.levelMenu(pathArr, path)
}
},
levelMenu (pathArr, path) {
const groupName = this.$route.meta.groupName
let labelArr = []
if (groupName) {
for (let menu of sidebarConfig.menuList) {
if (menu.subs && groupName === menu.index) {
labelArr.push({ title: menu.title })
for (let subMenu of menu.subs) {
if (subMenu.index === path) {
labelArr.push({ title: subMenu.title, path: path })
break
}
}
}
}
} else {
for (let menu of sidebarConfig.menuList) {
if (menu.index === path) {
labelArr.push({
title: menu.title
})
labelArr.push({
title: menu.title,
path: menu.index
})
}
}
}
this.labelArr = labelArr
this.setBreadcrumbArr(labelArr)
},
setBreadcrumbArr (labelArr) {
window.sessionStorage.setItem('breadcrumbArr', window.JSON.stringify(labelArr))
}
}
}
</script>
<style lang="scss" >
// 面包屑
.breadcrumb {
.el-breadcrumb__item {
height: 40px;
line-height: 40px;
&:last-child {
.el-breadcrumb__inner {
font-weight: 600;
}
}
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
font-weight: 400;
}
.operate-btn {
height: 40px;
line-height: 40px;
text-align: right;
}
}
</style>