什么是面包屑-Breadcrumb

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

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

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

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

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

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

如下配图以方便理解:

what?

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

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

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

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

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

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

How?

如何实现的【整一个】?

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

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

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

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

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

where ?

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

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

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

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

相关推荐
桂月二二31 分钟前
深入探讨前端新技术:CSS Container Queries 的应用与实践
前端·css
小郑T_T1 小时前
BEM规范
前端·css·vue.js
大美B端工场-B端系统美颜师1 小时前
站在JavaScript的视角去看,HTML的DOM和GLTF的Json数据。
javascript·html·json·gltf
小汤猿人类1 小时前
vue3 store刷新失效场景解决方案
前端
LCG元2 小时前
Vue.js组件开发-实现广告图片浮动随屏幕滚动
前端·javascript·vue.js
_未知_开摆2 小时前
el-table表格点击单元格实现编辑
前端·javascript·vue.js·elementui
Coding Is Fun4 小时前
5分钟掌握React的Redux Toolkit + Redux
前端·react.js·前端框架
_island4 小时前
《Cursor-AI编程》基础篇-Tab代码智能补充
前端·javascript·aigc
大模型铲屎官5 小时前
前端表单验证终极指南:HTML5 内置验证 + JavaScript 自定义校验
前端·javascript·html·html5·表单验证·内置验证·自定义校验
前端破坏球5 小时前
开源一款丝滑纯粹的简历编辑器,小小集成AI-DeepseekV3
前端·next.js