base标签使href="#section2"被解析为/myapp/#section2导致重载，应使用new url("#section2", document.baseuri).href生成安全链接并配合preventdefault与scrollintoview。
base 标签会让所有 href="#section2" 被解析成 /myapp/#section2，触发页面重载或 SPA 路由不响应——这不是 bug，是浏览器严格按 URL 解析规范执行的结果。
为什么 base 标签会让 #id 锚点跳转失败
浏览器把 href="#section2" 当作相对 URL 处理（它既不以 / 开头，也不含协议），一旦页面有 <base href="/myapp/">，就会拼出 /myapp/#section2。这个地址被当成新导航目标：
- 当前 URL 是
https://example.com/myapp/page，点击后跳到https://example.com/myapp/#section2→ 路径变了，触发整页重载 - SPA 路由（如 Vue Router）监听的是
hashchange或popstate，但/myapp/#section2和原路径不匹配，既不滚动也不触发路由逻辑 - Network 面板能看到一次对
/myapp/的 200 请求（返回完整 HTML），这就是重载证据
用 new URL("#id", document.baseURI).href 生成安全 href
这是最干净、语义正确、且兼容所有现代浏览器的方案：它绕过 base 对 hash 的干扰，直接返回当前页面 URL 拼上 #id，不会触发重载。
- 不要手动拼字符串：
href="#"+id仍会被 base 解析为相对路径 - 正确写法（客户端）：
href={new URL("#section2", document.baseURI).href}（React/Vue） - 服务端渲染时可注入：
href="${location.pathname}#section2"，确保路径与当前页一致 - 注意：
document.baseURI在无<base>时默认是当前页面 URL，所以该写法通用
必须配合 event.preventDefault() 拦截默认行为
即使 href 指向了正确地址，原生锚点跳转仍可能因 CSS 或布局限制失效（比如 html { overflow: hidden } 场景下 #top 完全不工作）。显式控制滚动更可靠。
- 保留语义和可访问性：
href="#section2"+event.preventDefault()+element.scrollIntoView() - Vue 中：
@click.prevent="scrollTo('section2')"；React 中：onClick={(e) => { e.preventDefault(); document.getElementById('section2')?.scrollIntoView(); }} - 首次加载带 hash（如
/page#faq）时，需在组件挂载后检查location.hash并手动滚动，因为 DOM 可能还没就绪
Gmail 邮件中锚点失效是另一回事，不能靠 JS 修复
Gmail 服务端会重写所有 id 和 href="#id"，但加的随机前缀不一致（id="m_123abc" vs href="#m_123_abc"），导致永远不匹配。此时任何 JS 拦截都无效。
- 唯一可行解：避免使用 id 锚点，改用
<a name="faq"></a>（Gmail 不重写name属性） - 或者彻底放弃内部跳转，用多个独立小节+明确标题链接替代
- 切勿在邮件中依赖
scrollIntoView()或监听hashchange，Gmail 不支持 JS 执行
真正容易被忽略的点是：base 标签的影响不是“有时出错”，而是只要存在，所有相对 href（包括 #id、./img.png、js/app.js）都会被统一处理；而锚点失效只是其中最隐蔽、最难排查的表现之一。别只盯着 scroll-behavior 或 id 拼写，先确认 base 是否必要、是否配对了你的部署路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
