<base> 标签使 href="#section2" 被解析为 /myapp/#section2，触发页面重载而非锚点滚动；应使用 new URL("#section2", document.baseURI).href 动态生成正确 URL 或配合 event.preventDefault() + scrollIntoView() 精确控制。
<base> 标签会让 href="#section2" 被浏览器当作相对 URL 解析，拼成 /myapp/#section2 这样的完整路径，触发页面重载而非锚点滚动——这不是 bug，是规范行为，但对 SPA 来说就是实际故障。
为什么 href="#xxx" 点击后页面刷新或滚顶
浏览器把所有不以 /、http:// 或 https:// 开头的 href 值都视为相对路径。一旦存在 <base href="/myapp/">，href="#section2" 就会被解析为 /myapp/#section2。
这个结果本身合法，但后续行为出问题：
- 当前 URL 是
https://example.com/myapp/page，点击后跳转到https://example.com/myapp/#section2—— 路径变了，触发 history pushState 或服务端重定向，整页重载 - SPA 路由（如 Vue Router）监听的是
hashchange或popstate，但/myapp/#section2和原路径不匹配，路由不响应，也不滚动 - Network 面板能看到一次对
/myapp/的请求（状态 200，返回完整 HTML），这就是重载证据
如何安全地写锚点链接而不被 base 干扰
不能靠删 <base>，它常用于资源路径统一；关键是让浏览器“识别出这是当前页内的片段”，绕过 base 的相对解析逻辑。
立即学习“前端免费学习笔记（深入）”；
- 用
new URL("#section2", document.baseURI).href动态生成：它会正确忽略<base>对 hash 的影响，返回类似https://example.com/myapp/page#section2的绝对 URL - 服务端渲染时写成
href="${location.pathname}#section2"；客户端 React/Vue 可写href={window.location.pathname + "#section2"} - 避免手拼字符串如
"#" + id直接赋给href，它仍会被 base 当作相对路径处理 - 首次加载带 hash（如
/myapp/page#faq）时，需手动检查location.hash并调用element.scrollIntoView()，因为 DOM 渲染可能晚于路由初始化
event.preventDefault() 是最直接的拦截手段
原生锚点跳转在有 <base> 时不可靠，必须主动拦截默认行为。
-
href="javascript:void(0)"彻底切断跳转，但丧失语义和键盘可访问性，只适合纯交互按钮 -
href="#section2"+event.preventDefault()更推荐：保留语义、支持 tab 导航、能用 JS 精确控制滚动位置 - Vue/React 中不要依赖
<a href="#xxx">触发逻辑，改用@click或onClick显式调用window.scrollTo()或element.scrollIntoView() -
<router-link>或<Link>不受影响，因为它们内部已preventDefault()，但原生<a>不会
容易被忽略的 scroll-margin-top 兼容性细节
即使锚点跳转没重载，滚动定位也可能不准——这和 <base> 无关，但常一起出现，排查时容易混淆。
-
scroll-margin-top必须加在目标元素（如<h2 id="section2">）上，不是它的父容器 - 该属性在 Chrome/Firefox 支持良好，但 Safari 旧版本不支持，需 fallback 到
scrollIntoView({ block: 'start', behavior: 'smooth' }) - 如果目标元素是动态渲染（如 v-if / conditional render），确保滚动代码执行时 DOM 已挂载
真正麻烦的不是 base 标签本身，而是它造成的静默故障：不报错、不警告，只在 Network 里悄悄多一次请求，或用户反馈“点一下就滚回顶部”。排查时得先看 base 是否存在，再确认 href 是不是被拼错了，最后才轮到 JS 逻辑。
