
2 changed files with 3 additions and 96 deletions
@ -1,77 +0,0 @@ |
|||||
<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> |
|
Loading…
Reference in new issue