href相对路径解析依赖当前url结尾斜杠：有斜杠时解析为同级目录，无斜杠时向上回退一级；避免方式为统一用根相对路径或服务端301归一化。
href相对路径在不同URL结尾斜杠下解析不一致
当前页面地址是 https://a.com/blog/post/（结尾有斜杠）时，href="index.html" 会请求 https://a.com/blog/post/index.html；而地址是 https://a.com/blog/post（无斜杠）时，同样写 href="index.html" 却会请求 https://a.com/blog/index.html。这种差异不是bug，而是浏览器严格按当前 URL 的“路径层级”解析相对路径的结果。
避免方式只有两个：
- 统一用根相对路径：
href="/about.html"、href="/static/js/app.js"，不依赖当前 URL 结尾是否有斜杠 - 开发期强制所有路由结尾带斜杠（或都不带），并在服务端做 301 重定向归一化
- 静态资源路径可配合
<base href="/">，但注意它会影响所有相对 URL（包括<img src>、<link href>），需全盘评估
SPA中href="#section"被路由库静默拦截
Vue Router 或 React Router v6+ 默认监听所有 <a></a> 点击事件，把 href="#faq" 当作路由路径处理，而不是触发原生锚点滚动。结果是地址栏 hash 改变了，但页面没滚动——你没写错，是框架“太尽责”了。
可行解法：
- 加
target="_self"强制走浏览器原生逻辑（适用于 Markdown 渲染等无法改用<link>的场景） - 用
scrollIntoView()替代：document.querySelector('#faq')?.scrollIntoView({ behavior: 'smooth', block: 'start' }) - Vue 中可在
mounted后监听hashchange事件手动滚动，但要event.preventDefault()防止重复触发
动态渲染内容里href锚点找不到目标id
React/Vue 组件里写了 href="#api"，但点击后不动——大概率因为目标元素（如 <h2 id="api"></h2>）是异步加载或条件渲染的，点击瞬间 DOM 还没挂载好。浏览器不会报错，只是查不到节点，就当没这回事。
验证和修复建议：
- 在控制台执行
document.getElementById('api')，返回null就确认问题 - 确保跳转逻辑在组件
useEffect(() => {}, [])或mounted()之后执行 - 若目标元素可能延迟出现，加个简单轮询或
MutationObserver监听插入后再滚动 - 别依赖
setTimeout猜时间，DOM 就绪时机不可靠
href含中文/空格/特殊字符导致截断或404
href="文档 v2.pdf" 在浏览器地址栏里实际发出的请求是 文档，后面全丢了。因为空格、中文、#、? 等字符未编码，URL 解析直接中断。
编码必须分清场景：
- 前端拼接：用
encodeURIComponent(filename)，不是encodeURI()（后者不编码/，但前者会——所以路径段不能用后者） - 服务端返回的链接，必须已做 URL 编码，尤其来自用户上传文件名或数据库字段
- 如果 href 是
mailto:或tel:，不要对整个值编码，只对参数值（如 subject、body）单独encodeURIComponent()
最常被忽略的是：href 看似只是个字符串，但它实时耦合着文件目录结构、部署路径、路由模式、甚至 JS 执行时序。改一个路径，可能同时牵动构建配置、CDN 缓存、SPA 路由、以及动态内容的生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
