base标签使href="#xxx"被解析为完整路径导致重载，因浏览器将hash视为相对URL；应使用new URL("#id", document.baseURI).href生成安全锚点，并配合preventDefault和scrollIntoView修复滚动。
<base> 标签会让 href="#section2" 被解析成 /myapp/#section2，路径变更触发重载或 SPA 路由不响应——这不是 bug，是浏览器严格按规范处理相对 URL 的必然结果。
为什么 base 标签会让 href="#xxx" 变成整页重载
浏览器把 href="#section2" 当作“相对 URL”处理（它既不以 / 开头，也不含协议）。一旦页面中存在 <base href="/myapp/">，就会拼出新路径 /myapp/#section2。这个地址被当成一个全新路由请求：
- 如果当前在
/myapp/page，点击后跳转到/myapp/#section2，服务端可能返回完整 HTML，导致页面刷新 - SPA 路由（如 Vue Router）监听的是
hashchange或popstate，但/myapp/#section2和原路径不匹配，既不滚动也不触发路由逻辑 - Network 面板能看到一次对
/myapp/的 200 请求，内容是整页 HTML，这就是重载证据
如何生成真正安全的锚点 href 值
不能靠字符串拼接，必须用浏览器原生 API 正确解析当前上下文：
- 用
new URL("#section2", document.baseURI).href—— 这个调用会忽略<base>对 hash 的干扰，返回当前页面 URL 拼上#section2 - 服务端渲染时可注入
href="${location.pathname}#section2"，客户端 React/Vue 写成href={window.location.pathname + "#section2"} - 绝对不要写
href="#"+id后直接赋值，它仍会被 base 解析为相对路径
点击时必须 preventDefault()，不能只改 href
即使 href 值正确，原生点击行为仍可能触发跳转逻辑（尤其在 history 模式 SPA 中）：
立即学习“前端免费学习笔记（深入）”；
- 给链接加
onclick="event.preventDefault(); document.getElementById('section2').scrollIntoView({ behavior: 'smooth' });" - Vue 中用
@click.prevent，React 中用onClick={(e) => { e.preventDefault(); ... }} - 避免用
href="javascript:void(0)"：语义丢失、键盘导航失效、屏幕阅读器不可读 -
<router-link>或<Link>不受影响，因它们内部已调用preventDefault()；但原生<a>不会
首次加载带 hash 时手动滚动容易被忽略
用户直接访问 /myapp/page#faq，路由初始化常早于 DOM 渲染，浏览器默认滚动会失败：
- 需在 JS 初始化阶段检查
location.hash，提取 ID 后调用scrollIntoView() - 加一层存在性判断：
const el = document.getElementById(hash.slice(1)); if (el && el.offsetParent !== null) el.scrollIntoView(...) - 注意
scroll-margin-top必须加在目标元素上（如h2[id]），不是父容器；单位用px或rem，不能用百分比
最隐蔽的坑是：所有这些修复都依赖目标元素真实存在、ID 合法（不以数字开头、不含空格）、且已挂载到 DOM —— 动态组件里漏掉 mounted/useEffect，或者 SSR 时 ID 渲染不一致，都会让前面所有努力白费。
