js面包屑，弄一个面包屑，什么是面包屑，又去理解面包屑是什么意思呢，对于不会应该怎么办呢这篇文章告诉你。

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

目录大纲

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

2.功能框架预览于介绍

框架效果预览：

页面架构代码预览：

HTML页面预览：

 权限验证介绍

3.面包屑的逻辑

 下面就是面包屑逻辑

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

2.进入首页

 3.代码执行逻辑

---

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

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

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

---

---

•        面包屑功能的概念最初来自于面包制作过程中使用的 "breadcrumb"（面包屑屑）术语。在烘焙时，为了追踪和控制面团、酵母或其它成分的份量，一般会在面团表面割上刻线，以便于参考。这些刻线被称为 "breadcrumbs"，意为面包屑屑。
•        在Web设计中，面包屑导航也借用了面包制作的概念，用于指示当前页面所处的导航路径，帮助用户理解他们在网站中的位置并提供页面之间的导航链接。通过显示页面的层级结构和路径信息，用户可以更容易地返回上一级页面或导航到其他相关页面。
•        面包屑功能在用户体验和网站导航中起着重要的作用。它有助于提高网站的可用性、降低用户的迷失感，并提供清晰而直观的导航选项。特别是在大型网站或电子商务平台中，面包屑能让用户方便地跟踪和管理他们的浏览路径，提供了一种快速导航方式。
•         如今，面包屑功能已成为许多网站和应用程序常用的导航元素，具有广泛的应用。它在网页设计和用户体验中扮演着重要的角色，为用户提供更好的导航和浏览体验。

---

---

2.功能框架预览于介绍

框架效果预览：

页面架构代码预览：

1.  
   let roles = [
2.  
   {
3.  
   "id": 1,
4.  
   "pid": 0,
5.  
   "name": "index",
6.  
   "path": "/",
7.  
   "meta": {
8.  
   "icon": "icon-home",
9.  
   "title": "首页"
10.  
    },
11.  
    "redirect": "/root",
12.  
    "children": []
13.  
    },
14.  
    {
15.  
    "id": 4,
16.  
    "pid": 0,
17.  
    "name": "power",
18.  
    "path": "/power",
19.  
    "meta": {
20.  
    "icon": "icon-lock",
21.  
    "title": "权限管理"
22.  
    },
23.  
    "redirect": "/power",
24.  
    "children": [
25.  
    {
26.  
    "id": 15,
27.  
    "pid": 4,
28.  
    "name": "account",
29.  
    "path": "/account",
30.  
    "meta": {
31.  
    "icon": "icon-rectangular-vertebra",
32.  
    "title": "账号管理"
33.  
    },
34.  
    "redirect": "/account",
35.  
    "children": []
36.  
    },
37.  
    {
38.  
    "id": 32,
39.  
    "pid": 4,
40.  
    "name": "agree",
41.  
    "path": "/agree",
42.  
    "meta": {
43.  
    "icon": "icon-newspaper-folding",
44.  
    "title": "用户协议管理"
45.  
    },
46.  
    "redirect": "/agree",
47.  
    "children": []
48.  
    }
49.  
    ]
50.  
    },
51.  
    {
52.  
    "id": 5,
53.  
    "pid": 0,
54.  
    "name": "industry",
55.  
    "path": "/industry",
56.  
    "meta": {
57.  
    "icon": "icon-association",
58.  
    "title": "行业分类管理"
59.  
    },
60.  
    "redirect": "/industry",
61.  
    "children": []
62.  
    },
63.  
    {
64.  
    "id": 6,
65.  
    "pid": 0,
66.  
    "name": "goods",
67.  
    "path": "/goods",
68.  
    "meta": {
69.  
    "icon": "icon-commodity",
70.  
    "title": "商品管理"
71.  
    },
72.  
    "redirect": "/goods",
73.  
    "children": [
74.  
    {
75.  
    "id": 40,
76.  
    "pid": 6,
77.  
    "name": "goodschild",
78.  
    "path": "/goodschild",
79.  
    "meta": {
80.  
    "icon": "icon-home",
81.  
    "title": "商品详情"
82.  
    },
83.  
    "redirect": "/goodschild",
84.  
    "children": []
85.  
    },
86.  
    {
87.  
    "id": 41,
88.  
    "pid": 6,
89.  
    "name": "goods",
90.  
    "path": "/goods",
91.  
    "meta": {
92.  
    "icon": "icon-commodity",
93.  
    "title": "商品管理"
94.  
    },
95.  
    "redirect": "/goods",
96.  
    "children": []
97.  
    }
98.  
    ]
99.  
    },
100.  
     {
101.  
     "id": 8,
102.  
     "pid": 0,
103.  
     "name": "supply",
104.  
     "path": "/supply",
105.  
     "meta": {
106.  
     "icon": "icon-bar-code",
107.  
     "title": "供需管理"
108.  
     },
109.  
     "redirect": "/supply",
110.  
     "children": [
111.  
     {
112.  
     "id": 17,
113.  
     "pid": 8,
114.  
     "name": "supply",
115.  
     "path": "/supply",
116.  
     "meta": {
117.  
     "icon": "icon-api-app",
118.  
     "title": "供应列表"
119.  
     },
120.  
     "redirect": "/supply",
121.  
     "children": []
122.  
     },
123.  
     {
124.  
     "id": 18,
125.  
     "pid": 8,
126.  
     "name": "need",
127.  
     "path": "/need",
128.  
     "meta": {
129.  
     "icon": "icon-api-app",
130.  
     "title": "需求管理"
131.  
     },
132.  
     "redirect": "/need",
133.  
     "children": []
134.  
     }
135.  
     ]
136.  
     },
137.  
     {
138.  
     "id": 9,
139.  
     "pid": 0,
140.  
     "name": "office",
141.  
     "path": "/office",
142.  
     "meta": {
143.  
     "icon": "icon-home",
144.  
     "title": "中介服务"
145.  
     },
146.  
     "redirect": "/middle",
147.  
     "children": [
148.  
     {
149.  
     "id": 20,
150.  
     "pid": 9,
151.  
     "name": "office",
152.  
     "path": "/office",
153.  
     "meta": {
154.  
     "icon": "icon-api-app",
155.  
     "title": "事务所分类管理"
156.  
     },
157.  
     "redirect": "/office",
158.  
     "children": []
159.  
     },
160.  
     {
161.  
     "id": 21,
162.  
     "pid": 9,
163.  
     "name": "offices",
164.  
     "path": "/offices",
165.  
     "meta": {
166.  
     "icon": "icon-home",
167.  
     "title": "事务所管理"
168.  
     },
169.  
     "redirect": "/offices",
170.  
     "children": []
171.  
     },
172.  
     {
173.  
     "id": 29,
174.  
     "pid": 9,
175.  
     "name": "text",
176.  
     "path": "/text",
177.  
     "meta": {
178.  
     "icon": "icon-like",
179.  
     "title": "事务所文章"
180.  
     },
181.  
     "redirect": "/text",
182.  
     "children": []
183.  
     },
184.  
     {
185.  
     "id": 35,
186.  
     "pid": 9,
187.  
     "name": "operator",
188.  
     "path": "/operator",
189.  
     "meta": {
190.  
     "icon": "icon-newspaper-folding",
191.  
     "title": "运营商新闻管理"
192.  
     },
193.  
     "redirect": "/operator",
194.  
     "children": []
195.  
     }
196.  
     ]
197.  
     },
198.  
     {
199.  
     "id": 10,
200.  
     "pid": 0,
201.  
     "name": "bank",
202.  
     "path": "/bank",
203.  
     "meta": {
204.  
     "icon": "icon-bank",
205.  
     "title": "金融服务"
206.  
     },
207.  
     "redirect": "/bank",
208.  
     "children": [
209.  
     {
210.  
     "id": 23,
211.  
     "pid": 10,
212.  
     "name": "bank",
213.  
     "path": "/bank",
214.  
     "meta": {
215.  
     "icon": "icon-connection-point",
216.  
     "title": "建行分类"
217.  
     },
218.  
     "redirect": "/bank",
219.  
     "children": []
220.  
     },
221.  
     {
222.  
     "id": 24,
223.  
     "pid": 10,
224.  
     "name": "bankbanner",
225.  
     "path": "/bankbanner",
226.  
     "meta": {
227.  
     "icon": "icon-picture",
228.  
     "title": "建行轮播"
229.  
     },
230.  
     "redirect": "/bankbanner",
231.  
     "children": []
232.  
     },
233.  
     {
234.  
     "id": 31,
235.  
     "pid": 10,
236.  
     "name": "bankmap",
237.  
     "path": "/bankmap",
238.  
     "meta": {
239.  
     "icon": "icon-home",
240.  
     "title": "网点管理"
241.  
     },
242.  
     "redirect": "/bankmap",
243.  
     "children": []
244.  
     },
245.  
     {
246.  
     "id": 39,
247.  
     "pid": 10,
248.  
     "name": "policy",
249.  
     "path": "/policy",
250.  
     "meta": {
251.  
     "icon": "icon-newspaper-folding",
252.  
     "title": "金融政策"
253.  
     },
254.  
     "redirect": "/policy",
255.  
     "children": []
256.  
     }
257.  
     ]
258.  
     },
259.  
     {
260.  
     "id": 16,
261.  
     "pid": 0,
262.  
     "name": "notice",
263.  
     "path": "/notice",
264.  
     "meta": {
265.  
     "icon": "icon-announcement",
266.  
     "title": "公告管理"
267.  
     },
268.  
     "redirect": "/notice",
269.  
     "children": []
270.  
     },
271.  
     {
272.  
     "id": 22,
273.  
     "pid": 0,
274.  
     "name": "feedback",
275.  
     "path": "/feedback",
276.  
     "meta": {
277.  
     "icon": "icon-folder",
278.  
     "title": "意见反馈"
279.  
     },
280.  
     "redirect": "/feedback",
281.  
     "children": []
282.  
     },
283.  
     {
284.  
     "id": 43,
285.  
     "pid": 0,
286.  
     "name": "state",
287.  
     "path": "/state",
288.  
     "meta": {
289.  
     "icon": "icon-menu-fold-one",
290.  
     "title": "平台管理"
291.  
     },
292.  
     "redirect": "/platform",
293.  
     "children": [
294.  
     {
295.  
     "id": 44,
296.  
     "pid": 43,
297.  
     "name": "state",
298.  
     "path": "/state",
299.  
     "meta": {
300.  
     "icon": "icon-api-app",
301.  
     "title": "企联动态"
302.  
     },
303.  
     "redirect": "/state",
304.  
     "children": []
305.  
     },
306.  
     {
307.  
     "id": 45,
308.  
     "pid": 43,
309.  
     "name": "active",
310.  
     "path": "/active",
311.  
     "meta": {
312.  
     "icon": "icon-association",
313.  
     "title": "企联活动"
314.  
     },
315.  
     "redirect": "/active",
316.  
     "children": []
317.  
     },
318.  
     {
319.  
     "id": 46,
320.  
     "pid": 43,
321.  
     "name": "rule",
322.  
     "path": "/rule",
323.  
     "meta": {
324.  
     "icon": "icon-newspaper-folding",
325.  
     "title": "政策法规"
326.  
     },
327.  
     "redirect": "/rule",
328.  
     "children": []
329.  
     },
330.  
     {
331.  
     "id": 47,
332.  
     "pid": 43,
333.  
     "name": "ad",
334.  
     "path": "/ad",
335.  
     "meta": {
336.  
     "icon": "icon-ad",
337.  
     "title": "广告管理"
338.  
     },
339.  
     "redirect": "/ad",
340.  
     "children": []
341.  
     },
342.  
     {
343.  
     "id": 48,
344.  
     "pid": 43,
345.  
     "name": "poster",
346.  
     "path": "/poster",
347.  
     "meta": {
348.  
     "icon": "icon-picture",
349.  
     "title": "入会申请"
350.  
     },
351.  
     "redirect": "/poster",
352.  
     "children": []
353.  
     }
354.  
     ]
355.  
     }
356.  
     ]

假设删除其中的一个那吗推荐下面  HTML页面预览：中相应的也删除掉不会报错就是占地方，因为整体的页面就是通过这段假数据拿到的。

HTML页面预览：

可以在原本的HTML上面进行页面的制作与更改

 权限验证介绍

如果我们直接从其他页面进入那么在没有存储中没有数据1的话，那么他就会跳入login页面，如果有那么将是你点击的那个页面

let qxian = 1;

3.面包屑的逻辑

进一步的刨析整个框架中点击左侧列表，顶部生成一个

 下面就是面包屑逻辑

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

获取账号和密码框的值---是否等于admin---123456   

成功将执行-----获取存储变量qxian权限验证和左侧导航的数据

失败将执行-----弹窗失败函数

1.  
   function islogin() {
2.  
   let account = document.getElementById("user").value;
3.  
   let password = document.getElementById("pass").value;
4.  
   if (account == 'admin' && password == '123456') {
5.  
   sessionStorage.setItem("id",qxian);
6.  
   sessionStorage.setItem("roles",JSON.stringify(roles));
7.  
   // 跳转页面
8.  
   setTimeout(() => {
9.  
   location.href = "./index.html"
10.  
    }, 1500);
11.  
    success()
12.  
    }else{
13.  
    fail()
14.  
    }
15.  
    }

假设下面是接口中的数据

1.  
   let qxian = 1;
2.  
   let roles = [
3.  
   {
4.  
   "id": 1,
5.  
   "pid": 0,
6.  
   "name": "index",
7.  
   "path": "/",
8.  
   "meta": {
9.  
   "icon": "icon-home",
10.  
    "title": "首页"
11.  
    },
12.  
    "redirect": "/root",
13.  
    "children": []
14.  
    },
15.  
    {
16.  
    "id": 4,
17.  
    "pid": 0,
18.  
    "name": "power",
19.  
    "path": "/power",
20.  
    "meta": {
21.  
    "icon": "icon-lock",
22.  
    "title": "权限管理"
23.  
    },
24.  
    "redirect": "/power",
25.  
    "children": [
26.  
    {
27.  
    "id": 15,
28.  
    "pid": 4,
29.  
    "name": "account",
30.  
    "path": "/account",
31.  
    "meta": {
32.  
    "icon": "icon-rectangular-vertebra",
33.  
    "title": "账号管理"
34.  
    },
35.  
    "redirect": "/account",
36.  
    "children": []
37.  
    },
38.  
    {
39.  
    "id": 32,
40.  
    "pid": 4,
41.  
    "name": "agree",
42.  
    "path": "/agree",
43.  
    "meta": {
44.  
    "icon": "icon-newspaper-folding",
45.  
    "title": "用户协议管理"
46.  
    },
47.  
    "redirect": "/agree",
48.  
    "children": []
49.  
    }
50.  
    ]
51.  
    },
52.  
    {
53.  
    "id": 5,
54.  
    "pid": 0,
55.  
    "name": "industry",
56.  
    "path": "/industry",
57.  
    "meta": {
58.  
    "icon": "icon-association",
59.  
    "title": "行业分类管理"
60.  
    },
61.  
    "redirect": "/industry",
62.  
    "children": []
63.  
    },
64.  
    {
65.  
    "id": 6,
66.  
    "pid": 0,
67.  
    "name": "goods",
68.  
    "path": "/goods",
69.  
    "meta": {
70.  
    "icon": "icon-commodity",
71.  
    "title": "商品管理"
72.  
    },
73.  
    "redirect": "/goods",
74.  
    "children": [
75.  
    {
76.  
    "id": 40,
77.  
    "pid": 6,
78.  
    "name": "goodschild",
79.  
    "path": "/goodschild",
80.  
    "meta": {
81.  
    "icon": "icon-home",
82.  
    "title": "商品详情"
83.  
    },
84.  
    "redirect": "/goodschild",
85.  
    "children": []
86.  
    },
87.  
    {
88.  
    "id": 41,
89.  
    "pid": 6,
90.  
    "name": "goods",
91.  
    "path": "/goods",
92.  
    "meta": {
93.  
    "icon": "icon-commodity",
94.  
    "title": "商品管理"
95.  
    },
96.  
    "redirect": "/goods",
97.  
    "children": []
98.  
    }
99.  
    ]
100.  
     },
101.  
     {
102.  
     "id": 8,
103.  
     "pid": 0,
104.  
     "name": "supply",
105.  
     "path": "/supply",
106.  
     "meta": {
107.  
     "icon": "icon-bar-code",
108.  
     "title": "供需管理"
109.  
     },
110.  
     "redirect": "/supply",
111.  
     "children": [
112.  
     {
113.  
     "id": 17,
114.  
     "pid": 8,
115.  
     "name": "supply",
116.  
     "path": "/supply",
117.  
     "meta": {
118.  
     "icon": "icon-api-app",
119.  
     "title": "供应列表"
120.  
     },
121.  
     "redirect": "/supply",
122.  
     "children": []
123.  
     },
124.  
     {
125.  
     "id": 18,
126.  
     "pid": 8,
127.  
     "name": "need",
128.  
     "path": "/need",
129.  
     "meta": {
130.  
     "icon": "icon-api-app",
131.  
     "title": "需求管理"
132.  
     },
133.  
     "redirect": "/need",
134.  
     "children": []
135.  
     }
136.  
     ]
137.  
     },
138.  
     {
139.  
     "id": 9,
140.  
     "pid": 0,
141.  
     "name": "office",
142.  
     "path": "/office",
143.  
     "meta": {
144.  
     "icon": "icon-home",
145.  
     "title": "中介服务"
146.  
     },
147.  
     "redirect": "/middle",
148.  
     "children": [
149.  
     {
150.  
     "id": 20,
151.  
     "pid": 9,
152.  
     "name": "office",
153.  
     "path": "/office",
154.  
     "meta": {
155.  
     "icon": "icon-api-app",
156.  
     "title": "事务所分类管理"
157.  
     },
158.  
     "redirect": "/office",
159.  
     "children": []
160.  
     },
161.  
     {
162.  
     "id": 21,
163.  
     "pid": 9,
164.  
     "name": "offices",
165.  
     "path": "/offices",
166.  
     "meta": {
167.  
     "icon": "icon-home",
168.  
     "title": "事务所管理"
169.  
     },
170.  
     "redirect": "/offices",
171.  
     "children": []
172.  
     },
173.  
     {
174.  
     "id": 29,
175.  
     "pid": 9,
176.  
     "name": "text",
177.  
     "path": "/text",
178.  
     "meta": {
179.  
     "icon": "icon-like",
180.  
     "title": "事务所文章"
181.  
     },
182.  
     "redirect": "/text",
183.  
     "children": []
184.  
     },
185.  
     {
186.  
     "id": 35,
187.  
     "pid": 9,
188.  
     "name": "operator",
189.  
     "path": "/operator",
190.  
     "meta": {
191.  
     "icon": "icon-newspaper-folding",
192.  
     "title": "运营商新闻管理"
193.  
     },
194.  
     "redirect": "/operator",
195.  
     "children": []
196.  
     }
197.  
     ]
198.  
     },
199.  
     {
200.  
     "id": 10,
201.  
     "pid": 0,
202.  
     "name": "bank",
203.  
     "path": "/bank",
204.  
     "meta": {
205.  
     "icon": "icon-bank",
206.  
     "title": "金融服务"
207.  
     },
208.  
     "redirect": "/bank",
209.  
     "children": [
210.  
     {
211.  
     "id": 23,
212.  
     "pid": 10,
213.  
     "name": "bank",
214.  
     "path": "/bank",
215.  
     "meta": {
216.  
     "icon": "icon-connection-point",
217.  
     "title": "建行分类"
218.  
     },
219.  
     "redirect": "/bank",
220.  
     "children": []
221.  
     },
222.  
     {
223.  
     "id": 24,
224.  
     "pid": 10,
225.  
     "name": "bankbanner",
226.  
     "path": "/bankbanner",
227.  
     "meta": {
228.  
     "icon": "icon-picture",
229.  
     "title": "建行轮播"
230.  
     },
231.  
     "redirect": "/bankbanner",
232.  
     "children": []
233.  
     },
234.  
     {
235.  
     "id": 31,
236.  
     "pid": 10,
237.  
     "name": "bankmap",
238.  
     "path": "/bankmap",
239.  
     "meta": {
240.  
     "icon": "icon-home",
241.  
     "title": "网点管理"
242.  
     },
243.  
     "redirect": "/bankmap",
244.  
     "children": []
245.  
     },
246.  
     {
247.  
     "id": 39,
248.  
     "pid": 10,
249.  
     "name": "policy",
250.  
     "path": "/policy",
251.  
     "meta": {
252.  
     "icon": "icon-newspaper-folding",
253.  
     "title": "金融政策"
254.  
     },
255.  
     "redirect": "/policy",
256.  
     "children": []
257.  
     }
258.  
     ]
259.  
     },
260.  
     {
261.  
     "id": 16,
262.  
     "pid": 0,
263.  
     "name": "notice",
264.  
     "path": "/notice",
265.  
     "meta": {
266.  
     "icon": "icon-announcement",
267.  
     "title": "公告管理"
268.  
     },
269.  
     "redirect": "/notice",
270.  
     "children": []
271.  
     },
272.  
     {
273.  
     "id": 22,
274.  
     "pid": 0,
275.  
     "name": "feedback",
276.  
     "path": "/feedback",
277.  
     "meta": {
278.  
     "icon": "icon-folder",
279.  
     "title": "意见反馈"
280.  
     },
281.  
     "redirect": "/feedback",
282.  
     "children": []
283.  
     },
284.  
     {
285.  
     "id": 43,
286.  
     "pid": 0,
287.  
     "name": "state",
288.  
     "path": "/state",
289.  
     "meta": {
290.  
     "icon": "icon-menu-fold-one",
291.  
     "title": "平台管理"
292.  
     },
293.  
     "redirect": "/platform",
294.  
     "children": [
295.  
     {
296.  
     "id": 44,
297.  
     "pid": 43,
298.  
     "name": "state",
299.  
     "path": "/state",
300.  
     "meta": {
301.  
     "icon": "icon-api-app",
302.  
     "title": "企联动态"
303.  
     },
304.  
     "redirect": "/state",
305.  
     "children": []
306.  
     },
307.  
     {
308.  
     "id": 45,
309.  
     "pid": 43,
310.  
     "name": "active",
311.  
     "path": "/active",
312.  
     "meta": {
313.  
     "icon": "icon-association",
314.  
     "title": "企联活动"
315.  
     },
316.  
     "redirect": "/active",
317.  
     "children": []
318.  
     },
319.  
     {
320.  
     "id": 46,
321.  
     "pid": 43,
322.  
     "name": "rule",
323.  
     "path": "/rule",
324.  
     "meta": {
325.  
     "icon": "icon-newspaper-folding",
326.  
     "title": "政策法规"
327.  
     },
328.  
     "redirect": "/rule",
329.  
     "children": []
330.  
     },
331.  
     {
332.  
     "id": 47,
333.  
     "pid": 43,
334.  
     "name": "ad",
335.  
     "path": "/ad",
336.  
     "meta": {
337.  
     "icon": "icon-ad",
338.  
     "title": "广告管理"
339.  
     },
340.  
     "redirect": "/ad",
341.  
     "children": []
342.  
     },
343.  
     {
344.  
     "id": 48,
345.  
     "pid": 43,
346.  
     "name": "poster",
347.  
     "path": "/poster",
348.  
     "meta": {
349.  
     "icon": "icon-picture",
350.  
     "title": "入会申请"
351.  
     },
352.  
     "redirect": "/poster",
353.  
     "children": []
354.  
     }
355.  
     ]
356.  
     }
357.  
     ]

2.进入首页

大概结构的一个预览

 3.代码执行逻辑

这一块是渲染列表的并且判断是否有二级数据如果有二级数据，那么渲染一个箭头代表拥有二级列表。

1.  
   function renList(arr){
2.  
   console.log(arr);
3.  
   let str = "";
4.  
   for(let i = 0; i < arr.length; i ){
5.  
   if(arr[i].children.length > 0){
6.  
   str = `
7.  
   <div class="frames-left-parent">
8.  
   <div class="frames-left-list">
9.  
   <p onclick="woqu(${i})">${arr[i].meta.title}<img src="./img/xjt.png" class="class_img" alt="" style="width:10px;height:10px;margin-left:10%"></p>
10.  
    </div>
11.  
    <div class="frames-left-child">
12.  
    `;
13.  
     
14.  
    for(let k = 0; k < arr[i].children.length; k ){
15.  
    str = `
16.  
    <div class="frames-left-item" style="background-color:${ arr[i].children[k].name == isname ? '#409EFF' : '' };" onclick="ishref('${arr[i].children[k].meta.title}','${arr[i].children[k].name}')">
17.  
     
18.  
    <p> ${arr[i].children[k].meta.title}</p>
19.  
    </div>
20.  
    `;
21.  
    }
22.  
     
23.  
    str = `</div></div>`;
24.  
    }else{
25.  
    str = `
26.  
    <div class="frames-left-list" style="background-color:${ arr[i].name == isname ? '#409EFF' : '' };" onclick="ishref('${arr[i].meta.title}','${arr[i].name}')">
27.  
    <p> ${arr[i].meta.title}</p>
28.  
    </div>
29.  
    `;
30.  
    }
31.  
    }
32.  
     
33.  
    document.getElementsByClassName("frames-left-nav")[0].innerHTML = str;
34.  
    }

通过点击渲染相应页面，也就是根据接口返回数据对比

1.  
    
2.  
   // 菜单点击
3.  
   function ishref(name,path){
4.  
   let arr = sessionStorage.getItem("list");
5.  
   if(arr == null){
6.  
   arr = [];
7.  
   }else{
8.  
   arr = JSON.parse(arr);
9.  
   }
10.  
     
11.  
    if(path == "index"){
12.  
    location.href = `./index.html`;
13.  
    return;
14.  
    }
15.  
     
16.  
    for(let i = 0; i < arr.length; i ){
17.  
    if(arr[i].path == path){
18.  
    location.href = `./${path}.html`;
19.  
    return;
20.  
    }
21.  
    }
22.  
     
23.  
    arr.push({
24.  
    name,
25.  
    path
26.  
    });
27.  
     
28.  
    let str = JSON.stringify(arr);
29.  
    sessionStorage.setItem("list",str);
30.  
    location.href = `./${path}.html`;
31.  
    }

删除面包屑

通过点击叉号关闭相应页面，也就是根据自己点击的进行关闭，关闭一个自动调一下页面，如果所有都已关闭那么将返回index。

1.  
   function isdel(path){
2.  
   let arr = sessionStorage.getItem("list");
3.  
   if(arr == null){
4.  
   arr = [];
5.  
   }else{
6.  
   arr = JSON.parse(arr);
7.  
   }
8.  
    
9.  
   for(let i = 0; i < arr.length; i ){
10.  
    if(arr[i].path == path){
11.  
    arr.splice(i,1);
12.  
    break;
13.  
    }
14.  
    }
15.  
     
16.  
    sessionStorage.setItem("list",JSON.stringify(arr));
17.  
     
18.  
    if(path != isname && arr.length != 0){
19.  
    tagList();
20.  
    return;
21.  
    }
22.  
    console.log(123);
23.  
    if(arr.length != 0){
24.  
    location.href = `./${arr[arr.length-1].path}.html`;
25.  
    }else{
26.  
    location.href = "./index.html";
27.  
    }
28.  
    }

欢迎观看本篇博客，如果有更好的提议，请与评论区发出，框架仅供学习使用

---

---

这篇好文章是转载于：学新通技术网