🙂博主：锅盖哒
🙂文章核心：带你了解原生js面包屑框架
目录大纲
1.面包屑的概念与框架地址
2.功能框架预览于介绍
框架效果预览：
页面架构代码预览：
HTML页面预览：
权限验证介绍
3.面包屑的逻辑
下面就是面包屑逻辑
1.首先从login页面进入拿到渲染左侧列表的值
2.进入首页
3.代码执行逻辑
1.面包屑的概念与框架地址
链接：原生js框架: 在此声明仅供学习使用
首先我们要了解面包屑的一个简单的概念，耐心的看下去
- 面包屑功能的概念最初来自于面包制作过程中使用的 "breadcrumb"（面包屑屑）术语。在烘焙时，为了追踪和控制面团、酵母或其它成分的份量，一般会在面团表面割上刻线，以便于参考。这些刻线被称为 "breadcrumbs"，意为面包屑屑。
- 在Web设计中，面包屑导航也借用了面包制作的概念，用于指示当前页面所处的导航路径，帮助用户理解他们在网站中的位置并提供页面之间的导航链接。通过显示页面的层级结构和路径信息，用户可以更容易地返回上一级页面或导航到其他相关页面。
- 面包屑功能在用户体验和网站导航中起着重要的作用。它有助于提高网站的可用性、降低用户的迷失感，并提供清晰而直观的导航选项。特别是在大型网站或电子商务平台中，面包屑能让用户方便地跟踪和管理他们的浏览路径，提供了一种快速导航方式。
- 如今，面包屑功能已成为许多网站和应用程序常用的导航元素，具有广泛的应用。它在网页设计和用户体验中扮演着重要的角色，为用户提供更好的导航和浏览体验。
2.功能框架预览于介绍
框架效果预览：
整体呢是以假数据的形式完成的文章来源：https://www.toymoban.com/news/detail-627972.html
文章来源地址https://www.toymoban.com/news/detail-627972.html
页面架构代码预览：
let roles = [
{
"id": 1,
"pid": 0,
"name": "index",
"path": "/",
"meta": {
"icon": "icon-home",
"title": "首页"
},
"redirect": "/root",
"children": []
},
{
"id": 4,
"pid": 0,
"name": "power",
"path": "/power",
"meta": {
"icon": "icon-lock",
"title": "权限管理"
},
"redirect": "/power",
"children": [
{
"id": 15,
"pid": 4,
"name": "account",
"path": "/account",
"meta": {
"icon": "icon-rectangular-vertebra",
"title": "账号管理"
},
"redirect": "/account",
"children": []
},
{
"id": 32,
"pid": 4,
"name": "agree",
"path": "/agree",
"meta": {
"icon": "icon-newspaper-folding",
"title": "用户协议管理"
},
"redirect": "/agree",
"children": []
}
]
},
{
"id": 5到了这里，关于js面包屑，如何制作面包屑，什么是面包屑，又如何去理解面包屑是什么呢，对于不会应该怎么办呢？这篇文章告诉你。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
