
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