面包屑链接不跳转最常见的原因是href为空、为#或路径拼写错误，导致页面刷新或锚点跳转；其次需检查JavaScript事件是否漏掉preventDefault、CSS pointer-events设置、SPA路由匹配及多语言或base URL部署适配问题。
面包屑里链接不跳转，检查 href 是否为空或写错
最常见的原因是 <a href=""> 里写了空字符串、# 或拼错了路径。浏览器会默认刷新当前页或锚点跳转，看起来像“点了没反应”。真实项目中建议用绝对路径或语义化相对路径，比如：/products/、../category/，避免 ./index.html 这类易出错写法。
注意：如果后端是 SPA（如 Vue/React），链接需匹配路由规则；若用 history.pushState 手动跳转，<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> 或 <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"> 会导致整页刷新，破坏 SPA 体验。必须用对应路由方案：
- Vue 2 + Vue Router：用
<router-link :to="'/products'> - Vue 3 + Vue Router 4：同样用
<router-link :to="{ path: '/products' }"> - React Router v6：改用
<Link to="/products">，且确保组件在<Router>内
如果用了 useNavigate 手动跳转，注意不能在非组件函数或异步回调里调用 —— 容易报 useNavigate may be used only in the context of a <Router> component 错误。
/zh/products）和 base URL 配置（如部署在子路径 /myapp/ 下），这时所有 href 或 to 值都要带前缀，否则点击就 404。 
