You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.6 KiB
137 lines
3.6 KiB
<template>
|
|
<el-breadcrumb class="app-breadcrumb" separator="/">
|
|
<transition-group name="breadcrumb">
|
|
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
|
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ titleFn(item.meta.title) }}</span>
|
|
<a v-else @click.prevent="handleLink(item)">{{ titleFn(item.meta.title) }}</a>
|
|
</el-breadcrumb-item>
|
|
</transition-group>
|
|
</el-breadcrumb>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
levelList: null
|
|
}
|
|
},
|
|
watch: {
|
|
$route(route) {
|
|
// if you go to the redirect page, do not update the breadcrumbs
|
|
if (route.path.startsWith('/redirect/')) {
|
|
return
|
|
}
|
|
this.getBreadcrumb()
|
|
}
|
|
},
|
|
created() {
|
|
this.getBreadcrumb()
|
|
},
|
|
methods: {
|
|
getBreadcrumb() {
|
|
// only show routes with meta.title
|
|
let matched = []
|
|
const router = this.$route
|
|
const pathNum = this.findPathNum(router.path)
|
|
// multi-level menu
|
|
if (pathNum > 2) {
|
|
const reg = /\/\w+/gi
|
|
const pathList = router.path.match(reg).map((item, index) => {
|
|
if (index !== 0) item = item.slice(1)
|
|
return item
|
|
})
|
|
this.getMatched(pathList, this.$store.getters.defaultRoutes, matched)
|
|
} else {
|
|
matched = router.matched.filter(item => item.meta && item.meta.title)
|
|
}
|
|
const breadcrumb = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
|
// 单层菜单的父级和子级可能配置了相同标题，只保留一层。
|
|
this.levelList = breadcrumb.filter((item, index) => {
|
|
return index === 0 || item.meta.title !== breadcrumb[index - 1].meta.title
|
|
})
|
|
},
|
|
findPathNum(str, char = "/") {
|
|
let index = str.indexOf(char)
|
|
let num = 0
|
|
while (index !== -1) {
|
|
num++
|
|
index = str.indexOf(char, index + 1)
|
|
}
|
|
return num
|
|
},
|
|
getMatched(pathList, routeList, matched) {
|
|
let data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0])
|
|
if (data) {
|
|
matched.push(data)
|
|
if (data.children && pathList.length) {
|
|
pathList.shift()
|
|
this.getMatched(pathList, data.children, matched)
|
|
}
|
|
}
|
|
},
|
|
handleLink(item) {
|
|
const { redirect, path } = item
|
|
if (redirect) {
|
|
this.$router.push(redirect)
|
|
return
|
|
}
|
|
this.$router.push(path)
|
|
},
|
|
titleFn(item, children) {
|
|
let str = "";
|
|
let lang = localStorage.getItem("language");
|
|
if (item.includes("|")) {
|
|
if (lang == "en_US") {
|
|
str = item.split("|")[1];
|
|
} else {
|
|
str = item.split("|")[0];
|
|
}
|
|
} else {
|
|
str = item;
|
|
}
|
|
if (children) {
|
|
children.forEach((i) => {
|
|
if (i.meta && i.meta.title) {
|
|
if (i.meta.title.includes("|")) {
|
|
if (lang == "en_US") {
|
|
i.meta.title = i.meta.title.split("|")[1];
|
|
} else {
|
|
i.meta.title = i.meta.title.split("|")[0];
|
|
}
|
|
} else {
|
|
i.meta.title = i.meta.title;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
if(item=="首页"){
|
|
if (lang == "en_US") {
|
|
str = "Home";
|
|
} else {
|
|
str = "首页";
|
|
}
|
|
}
|
|
return str;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-breadcrumb.el-breadcrumb {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
line-height: 50px;
|
|
margin-left: 8px;
|
|
|
|
a {
|
|
color: #54FFFF;
|
|
}
|
|
|
|
.no-redirect {
|
|
color: #54FFFF;
|
|
cursor: text;
|
|
}
|
|
}
|
|
</style>
|