面包屑导航（Breadcrumb Navigation）是一种网站导航方式，它能够告诉用户当前所处的位置和路径，并提供回到上一级或其他相关页面的链接。在 JavaScript 中可以通过以下方法实现面包屑导航：
1.首先需要定义一个包含页面路径的数组，例如：
var pathArray = [ {name: "首页", url: "/"}, {name: "分类", url: "/category"}, {name: "电脑数码", url: "/category/digital"}, {name: "笔记本", url: "/category/digital/laptop"} ];
2.然后在页面中插入 HTML 来展示面包屑导航，例如：
<div class="breadcrumb"> <ul> <li><a href="/">首页</a></li> <li><a href="/category">分类</a></li> <li><a href="/category/digital">电脑数码</a></li> <li>笔记本</li> </ul> </div>
3.最后在 JavaScript 中动态生成面包屑导航。可以通过查找当前页面在数组中的位置，然后生成相应的 HTML。例如：
var breadcrumb = document.querySelector(".breadcrumb"); var currentPath = "/category/digital/laptop"; // 当前页面路径 // 查找当前页面在数组中的位置 var currentIndex = pathArray.findIndex(function(item) { return item.url === currentPath; }); // 生成面包屑导航 HTML var breadcrumbHTML = ""; for (var i = 0; i <= currentIndex; i++) { if (i === currentIndex) { breadcrumbHTML += "<li>" + pathArray[i].name + "</li>"; } else { breadcrumbHTML += "<li><a href='" + pathArray[i].url + "'>" + pathArray[i].name + "</a></li>"; } } breadcrumb.querySelector("ul").innerHTML = breadcrumbHTML;
这样就可以动态生成面包屑导航，并根据当前页面高亮显示所在位置。
