快来看～我实现了面包屑导航 |
您所在的位置：网站首页 › 面包屑啥意思 › 快来看～我实现了面包屑导航 |
快来看～我实现了面包屑导航
|
一起养成写作习惯！这是我参与「掘金日新计划 · 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。 这里是通过当前路由分析得来了,举个🌰，比如当前选择如下菜单 当前路由: /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，可更具实际情况自行配置. 如果存在不对的地方，还请各位大佬给予指正～ 其他推荐几篇之前相关的文章，有兴趣的小伙伴可以看看哦～ 关于用vite2+vue3+Ts搭建后台模版这件事(一) 关于用vite2+vue3+Ts搭建后台模版这件事(二) |
【本文地址】
今日新闻 |
推荐新闻 |