快来看～我实现了面包屑导航

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

前言

写这篇文章是因为之前的JavaScript相关的算法和数据结构系列，先准备告一段落了，准备重启很久之前的关于系列，它是一个从0到1的vue3项目，准备将对应的模块通过文章的形式记录下来，所以，本篇就是关于在我这个项目中对于面包屑模块的记录。

面包屑

面包屑，准确的说叫面包屑导航(BreadcrumbNavigation),这个概念源自与一个童话故事，大体就是两个傻小子在森林里走迷路了，发现道路沿边的面包屑，最后通过这些面包屑走出了森林，找到了回家的路，总之就是面包屑就是有一个导航的作用.

在前端领域，面包屑效果是很常见的，特别是一些官网、B端产品等等。

效果就是：当页面路由变化的时候，面包屑导航要展示出当前菜单及其父级(祖先)菜单。

分享一下我项目当时的demo效果吧.

如图：

设计

面包屑组件效果肯定是要跟随侧边菜单的，侧边菜单的数据一般也是后端根据权限不同返回的。

侧边菜单数据结构大体如下:

menus = [
  {
    path: "/dashboard",
    title: "工作台",
    icon: "dashboard"
  },
  {
    path: "/test",
    title: "测试页",
    icon: "test"
  },
  {
    path: "/mult",
    title: "多级",
    icon: "mult",
    children: [
        {
          path: "/mult/one",
          title: "多级1",
          icon: "mult-1",
        }
        // ...
    ]
  }

]

思路:

获取当前路由path
通过侧边菜单数据结构可以看出是一个树的物理结构，当前路由就是一个子节点
只要从树root一直找到对应的那个子节点，这一段就是我们所需要的数据

实现

设计思路已经有了，上述思路中的1，2是容易理解和实现的，只是第3步如何从root一直找到targetNode。

这里是通过当前路由分析得来了,举个🌰，比如当前选择如下菜单

截屏2022-04-30 下午10.53.42.png

当前路由: /mult/three/threeChild1

面包屑导航: 多级>多级3>多级3-1

是不是想到了，只需要将当前路由拆分，在菜单树中从上往下依次查找就可以了

对应关系如: /mult => 多级, /mult/three => 多级3, /mult/three/threeChild1 => 多级3-1

代码

function getCurrentBreadcrumbData(currentPath, navieMenus) {
  // 存放面包屑导航数据
  const breadcrumbList = [];
  
  // 拆分路由
  const currentPathSplit = currentPath.split('/').filter((c) => !!c);
  currentPathSplit.forEach((c, i) => {
    if (i) {
      currentPathSplit[i] = currentPathSplit[i - 1] + '/' + c;
    } else {
      currentPathSplit[i] = '/' + currentPathSplit[i];
    }
  });
  
  // 遍历菜单tree
  let seatchMenus = navieMenus;
  currentPathSplit.forEach((curPath) => {
    const findItem = seatchMenus.find((menu) => menu.path === curPath);
    if (findItem) {
      const { label, icon, path, children } = findItem;
      let newChildren = undefined;
      
      // 配置组件ui所需要的数据格式
      if (children && children.length) {
        newChildren = children.map((ch) => {
          return {
            label: ch.label,
            icon: ch.icon,
            key: ch.path,
          };
        });
      }
      const itemBreadcrumb = {
        label,
        icon,
        key: path,
        children: newChildren || undefined,
      };
      breadcrumbList.push(itemBreadcrumb);
      seatchMenus = findItem.children;
    }
  });
  return breadcrumbList;
}

最后

到这里，实现面包屑导航的功能就基本实现，对于上面代码中配置ui组件所需数据格式那里，我的项目是用的navie-ui，可更具实际情况自行配置.

如果存在不对的地方，还请各位大佬给予指正～

其他推荐

几篇之前相关的文章，有兴趣的小伙伴可以看看哦～