面包屑导航本质是语义化链接链路，须用包裹，层级用、末项用，分隔符用/；路径解析应优先后端注入结构化数据，前端解析需结合url构造函数与映射表；css避免::before插入斜杠，vue/react应通过路由元信息动态生成并保留搜索参数。
面包屑导航的本质是语义化链接链路
它不是视觉组件，而是用 <nav></nav> 包裹的、有明确层级关系的链接序列。浏览器和搜索引擎靠这个理解页面在站点结构中的位置。如果只用 <div> 堆文字，就等于扔掉了语义和可访问性。
<ul>
<li>必须用 <code><nav aria-label="Breadcrumb"></nav> 包裹，否则屏幕阅读器无法识别这是导航
<a></a>，最后一项用 <span></span>（不可点击，不加 href）<span aria-hidden="true">/</span>，而不是纯文本斜杠或 CSS 伪元素——前者会被读屏工具跳过，后者可能被误读手写静态面包屑：路径解析别硬拆 window.location.pathname
直接对 window.location.pathname 按 / 切割再拼链接，看似快，但会踩一堆坑：多级子目录带参数、URL 重写后路径不真实、i18n 路径前缀（如 /zh/blog/）被误判为层级。
- 优先从后端注入结构化数据，比如模板中输出：
const BREADCRUMB = [{text: "首页", href: "/"}, {text: "博客", href: "/blog"}, {text: "HTML 面包屑", href: null}]; - 若必须前端解析，用
URL构造函数 +pathname+ 显式配置映射表，例如："/blog/guide/breadcrumb" → ["首页", "文档", "面包屑"] - 避免用正则盲目替换路径，
/blog/和/blog-post/容易混淆
CSS 实现简洁分隔效果：慎用 ::before 或 background-image
很多教程用 a::before { content: "/"; }，但这样会让屏幕阅读器把斜杠也读出来，变成“首页 斜杠 博客 斜杠 当前页”，体验极差。
- 正确做法是用
<span aria-hidden="true">/</span>插入分隔符，并设display: inline-flex或display: inline-grid控制间距 - 如果要用图标（如
>或»），确保字体加载失败时有降级，比如同时设置font-family: system-ui, sans-serif; - 移动端需注意
white-space: nowrap+overflow-x: auto，防止长面包屑折行错位
Vue/React 中复用面包屑：别在每个页面手动写 items
在单页应用里，硬编码每个路由的面包屑数组，会导致维护成本飙升。路由变更、新增页面、文案调整都要改多处。
- Vue Router：在
router/index.js的路由定义里加meta: { breadcrumb: "用户管理" }，然后全局组件里用useRoute().matched提取并渲染 - React Router v6：用
useMatches()获取匹配栈，配合每个<route></route>的handle: { breadcrumb: ... }属性 - 关键点：最后一级的
breadcrumb应该支持函数形式，比如() => document.title，以兼容动态标题
最常被忽略的是面包屑里的链接应保留当前搜索参数（?q=xxx），否则点击返回上一级会丢失筛选条件——需要在生成 href 时手动合并 location.search。
