面包屑链接不跳转最常见的原因是href为空、为#或路径拼写错误，导致页面刷新或锚点跳转；其次需检查javascript事件是否漏掉preventdefault、css pointer-events设置、spa路由匹配及多语言或base url部署适配问题。
面包屑里链接不跳转，检查 href 是否为空或写错
最常见的原因是 <a href=""></a> 里写了空字符串、# 或拼错了路径。浏览器会默认刷新当前页或锚点跳转，看起来像“点了没反应”。真实项目中建议用绝对路径或语义化相对路径，比如：/products/、../category/，避免 ./index.html 这类易出错写法。
注意：如果后端是 SPA（如 Vue/React），链接需匹配路由规则；若用 history.pushState 手动跳转，<a></a> 的 href 仍要写对，否则 SEO 和右键新标签打开会失效。
用 JavaScript 动态生成面包屑时，事件绑定漏了 preventDefault
有人用 addEventListener('click', handler) 绑定点击，但没调 event.preventDefault()，导致页面先执行默认跳转，再执行 JS 逻辑，出现闪烁或跳转失败。更稳妥的做法是直接写 href，让浏览器原生处理导航；仅在需要拦截（如权限校验、埋点）时才用 JS，并务必加 preventDefault：
breadcrumbLink.addEventListener('click', function(e) {
e.preventDefault();
if (checkPermission()) {
window.location.href = this.getAttribute('href');
}
});
CSS 导致点击区域失效，重点查 pointer-events 和层级
面包屑常被套在 <nav></nav> 或 <ol></ol> 里，如果父容器或伪元素（如 ::before）设置了 pointer-events: none，或者有透明遮罩层（如 loading 蒙层未隐藏），点击就会穿透或失效。排查时可临时加一句调试样式：
nav a { outline: 2px solid red !important; }
确保链接文字能被选中、鼠标悬停有 cursor: pointer 反馈。另外，z-index 过低也可能被其他组件盖住，尤其在使用 CSS-in-JS 或框架 UI 库时容易忽略。
Vue/React 中面包屑链接跳转不生效，别忘了 router-link 或 useNavigate
在框架里硬写 <a href="/xxx"></a> 会导致整页刷新，破坏 SPA 体验。必须用对应路由方案：
- Vue 2 + Vue Router：用
<router-link :to="'/products'> - Vue 3 + Vue Router 4：同样用
<router-link :to=" path:></router-link> - React Router v6：改用
<link to="/products">，且确保组件在<router></router>内
如果用了 useNavigate 手动跳转，注意不能在非组件函数或异步回调里调用 —— 容易报 useNavigate may be used only in the context of a <router> component</router> 错误。
/zh/products）和 base URL 配置（如部署在子路径 /myapp/ 下），这时所有 href 或 to 值都要带前缀，否则点击就 404。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
