🙂博主:锅盖哒
🙂文章核心:带你了解原生js面包屑框架
目录大纲
1.面包屑的概念与框架地址
首先我们要了解面包屑的一个简单的概念,耐心的看下去
- 面包屑功能的概念最初来自于面包制作过程中使用的 "breadcrumb"(面包屑屑)术语。在烘焙时,为了追踪和控制面团、酵母或其它成分的份量,一般会在面团表面割上刻线,以便于参考。这些刻线被称为 "breadcrumbs",意为面包屑屑。
- 在Web设计中,面包屑导航也借用了面包制作的概念,用于指示当前页面所处的导航路径,帮助用户理解他们在网站中的位置并提供页面之间的导航链接。通过显示页面的层级结构和路径信息,用户可以更容易地返回上一级页面或导航到其他相关页面。
- 面包屑功能在用户体验和网站导航中起着重要的作用。它有助于提高网站的可用性、降低用户的迷失感,并提供清晰而直观的导航选项。特别是在大型网站或电子商务平台中,面包屑能让用户方便地跟踪和管理他们的浏览路径,提供了一种快速导航方式。
- 如今,面包屑功能已成为许多网站和应用程序常用的导航元素,具有广泛的应用。它在网页设计和用户体验中扮演着重要的角色,为用户提供更好的导航和浏览体验。
2.功能框架预览于介绍
框架效果预览:
整体呢是以假数据的形式完成的
页面架构代码预览:
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,
"pid": 0,
"name": "industry",
"path": "/industry",
"meta": {
"icon": "icon-association",
"title": "行业分类管理"
},
"redirect": "/industry",
"children": []
},
{
"id": 6,
"pid": 0,
"name": "goods",
"path": "/goods",
"meta": {
"icon": "icon-commodity",
"title": "商品管理"
},
"redirect": "/goods",
"children": [
{
"id": 40,
"pid": 6,
"name": "goodschild",
"path": "/goodschild",
"meta": {
"icon": "icon-home",
"title": "商品详情"
},
"redirect": "/goodschild",
"children": []
},
{
"id": 41,
"pid": 6,
"name": "goods",
"path": "/goods",
"meta": {
"icon": "icon-commodity",
"title": "商品管理"
},
"redirect": "/goods",
"children": []
}
]
},
{
"id": 8,
"pid": 0,
"name": "supply",
"path": "/supply",
"meta": {
"icon": "icon-bar-code",
"title": "供需管理"
},
"redirect": "/supply",
"children": [
{
"id": 17,
"pid": 8,
"name": "supply",
"path": "/supply",
"meta": {
"icon": "icon-api-app",
"title": "供应列表"
},
"redirect": "/supply",
"children": []
},
{
"id": 18,
"pid": 8,
"name": "need",
"path": "/need",
"meta": {
"icon": "icon-api-app",
"title": "需求管理"
},
"redirect": "/need",
"children": []
}
]
},
{
"id": 9,
"pid": 0,
"name": "office",
"path": "/office",
"meta": {
"icon": "icon-home",
"title": "中介服务"
},
"redirect": "/middle",
"children": [
{
"id": 20,
"pid": 9,
"name"