什么是面包屑-Breadcrumb

什么是面包屑？既耳熟又陌生，难不成是个最熟悉的陌生人？

🎤 遇事不决，可问春风，春风不语，必(bing)谷(google)百(baidu)寻

起源---想象来源于生活

格林童话名称：Hansel and Gretel 奇幻森林历险记 【感兴趣的可以去看看】

关联事件梗概：后母在父亲不在家时，将兄妹二人丢到了奇幻森林，当他们被带到森林中时想到通过沿途撒下面包屑来帮助他们能够找到回家的路。

所以，面包屑导航意在告知用户所处的当前网页的位置，方便用户可以通过该导航快速返回上一级网页。

如下配图以方便理解：

what?

🤓实际项目中面包屑又是什么东东呢？

简而言之，会用就行【🦾全局终，万万不可能】

🤷‍♂️仅举例说明，并非唯一方案

Vue2配套-Element UI 组件库中的 Breadcrumb 面包屑、

Vue3配套-Element Plus UI 组件库中的 Breadcrumb 面包屑、

React配套-Ant Design Vue 组件库中的 Breadcrumb 面包屑

Core

❤ 让用户清晰的了解到自己当前所在的位置，提升用户体验~

How?

如何实现的【整一个】？

为了少掉一些头发，这里仅记录下实现思路，欢迎讨论交流~

场景一：当页面路径(或路由)是由前端来维护(非动态生成)时，用户点击哪一个菜单，在代码中拼接对应的路径即可，可以便捷的实现用户点击哪里显示哪里

场景二：从服务器(后端)获取动态路径时，则需要换一种思路来解决问题。比如："缓存+对比"的思路。

进入当前页面时，判断当前缓存是否存在面包屑。没有的话，用LocalStorage来缓存当前面包屑。已存在，则对比前后数据是否一致，一致则取缓存中面包屑中对应数据展示，不一致则重新缓存面包屑并刷新页面。【感觉像念经，上图吧(PS:表述不当的地方欢迎指出)】

场景三：那就这样吧~【头发重要，欢迎留言区交流~😶】

where ?

简单记录下哪里用？【使用场景】

回忆是把杀猪刀，总归有想要磨刀霍霍向产品的时候。

🤓在网页设计(coding)中，面包屑是一种网页导航框架的辅助方式。能杜绝就杜绝某些人员想在C端使用的"五彩斑斓"式梦幻的诉求。

白话一些就是：面包屑一般应用于官方网站、后台管理系统等电脑端场景，而手机端强烈不建议使用，有违初衷。