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.
77 lines
2.0 KiB
77 lines
2.0 KiB
3 months ago
|
<template>
|
||
|
|
<el-breadcrumb v-if="showBreadcrumb" separator="/">
|
||
|
|
<el-breadcrumb-item
|
||
|
|
v-for="(item, index) in breadcrumbList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<i v-if="item.icon" :class="item.icon"></i>
|
||
|
|
<span>{{ item.title }}</span>
|
||
|
|
</el-breadcrumb-item>
|
||
|
|
</el-breadcrumb>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
breadcrumbList: [],
|
||
|
|
showBreadcrumb: false // 控制是否显示面包屑导航
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
$route() {
|
||
|
|
this.updateBreadcrumb();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.updateBreadcrumb();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
updateBreadcrumb() {
|
||
|
|
const currentPath = this.$route.path;
|
||
|
|
// 判断是否为子页面
|
||
|
|
if(!this.$parent.menuData)return
|
||
|
|
const isSubPage = this.isSubPage(currentPath);
|
||
|
|
this.showBreadcrumb = isSubPage;
|
||
|
|
|
||
|
|
if (isSubPage) {
|
||
|
|
this.breadcrumbList = this.getBreadcrumbList(currentPath);
|
||
|
|
} else {
|
||
|
|
this.breadcrumbList = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
isSubPage(path) {
|
||
|
|
console.log(this.$parent.menuData,'this.$parent.menuData==');
|
||
|
|
// 判断当前路径是否为子页面
|
||
|
|
for (const menu of this.$parent.menuData) {
|
||
|
|
for (const subMenu of menu.children) {
|
||
|
|
if (subMenu.path === path) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
getBreadcrumbList(path) {
|
||
|
|
const breadcrumbList = [];
|
||
|
|
// 遍历菜单数据，查找匹配的面包屑路径
|
||
|
|
for (const menu of this.$parent.menuData) {
|
||
|
|
for (const subMenu of menu.children) {
|
||
|
|
if (subMenu.path === path) {
|
||
|
|
breadcrumbList.push({ title: menu.title, icon: menu.icon });
|
||
|
|
breadcrumbList.push({ title: subMenu.title });
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return breadcrumbList;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.el-breadcrumb {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
</style>
|