使用场景:文章来源地址https://www.toymoban.com/news/detail-802863.html
- 当系统拥有超过两级以上的层级结构时
- 当需要告知用户『你在哪里』时
- 当需要向上导航的功能时
//定义MenuItem
export interface MenuItem{
key:string // 英文名
label:string //对应中文名
children : MenuItem[] // 一级子菜单
parentNodeList : MenuItem[] // 所有上级菜单=breadCrumbList
...
}
function findParentNodeList(key, menuData, parentNodeList = []) {
for (const item of menuData) {
if (item.key=== key) {
return [...parentNodeList , item ]; // 找到目标菜单，返回所有上级菜单
}
if (item.children) {
const result = findParentNodeList(key, item.children, [...parentNodeList , item]); // 1
if (result.length > parentNodeList.length) {
return result; // 已找到目标菜单，直接返回结果
}
}
}
return parentNodeList ; // 未找到目标菜单，返回当前的上级菜单
}
const breadCrumbList : MenuItem[] = findParentNodeList(activeKey,menuData);
const handelBreadCrumbClick=()=>{
//处理点击事件，跳转路由
}
// 面包屑组件
const BreadCrumb = ()=>{
return {breadCrumbList.map((item,index)=>{
<div onClick={handelBreadCrumbClick}>{index!==0&&'/'}{item.label}</div>
})}
}
文章来源：https://www.toymoban.com/news/detail-802863.html
到了这里，关于自制Breadcrumb 面包屑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[VUE学习]权限管理系统前端vue实现9-动态路由，动态标签页，动态面包屑](https://imgs.yssmx.com/Uploads/2024/02/541195-1.png)
