框架123

🙂博主：锅盖哒
🙂文章核心：带你了解原生js面包屑框架

目录大纲

1.面包屑的概念与框架地址

2.功能框架预览于介绍

框架效果预览：

页面架构代码预览：

HTML页面预览：

 权限验证介绍

3.面包屑的逻辑

 下面就是面包屑逻辑

1.首先从login页面进入拿到渲染左侧列表的值

2.进入首页

 3.代码执行逻辑

---

1.面包屑的概念与框架地址

链接：原生js框架: 在此声明仅供学习使用

首先我们要了解面包屑的一个简单的概念，耐心的看下去

---

---

•        面包屑功能的概念最初来自于面包制作过程中使用的 "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": "o