base标签使href="#section2"被解析为/base-path/#section2，导致路径变更触发重载或spa路由失效；应使用event.preventdefault()、动态生成绝对url或scrollintoview()等方案规避。
base 标签会让 href="#section2" 变成无效跳转，甚至触发整页重载——不是 bug，是浏览器严格按规范解析相对 URL 的必然结果。
base 标签如何把 href="#xxx" 解析成错误 URL
浏览器看到 href="#section2" 时，会把它当作“相对路径”处理（因为它不以 /、http:// 开头）。一旦页面中存在 <base href="/myapp/">，就会把 #section2 拼成 /myapp/#section2。这个拼接结果本身没问题，但问题出在后续行为：
- 如果当前 URL 是
https://example.com/myapp/page，点击后实际跳转到https://example.com/myapp/#section2—— 路径变了，触发 history pushState 或服务端重定向，页面刷新 - 更隐蔽的情况：SPA 路由（如 Vue Router）监听的是
hashchange或popstate，但/myapp/#section2和原路径/myapp/page不匹配，路由不响应，也不滚动 - Network 面板能看到一次对
/myapp/的空请求（状态 200，返回完整 HTML），这是页面重载的证据
为什么 href="javascript:void(0)" 或 preventDefault() 是必要手段
原生锚点跳转的默认行为在有 base 时不可靠，必须主动拦截：
-
href="javascript:void(0)"彻底切断跳转，但丧失语义和可访问性，仅适合纯交互按钮 -
href="#section2"+event.preventDefault()更推荐：保留语义、支持键盘导航、能用 JS 精确控制滚动位置 - Vue/React 中不要依赖
<a href="#id"></a>触发逻辑，改用@click或onClick显式调用window.scrollTo() - 注意：
router-link或<link>不受base影响，因为它们内部已preventDefault，但原生<a></a>不会
SPA 中真正安全的锚点写法
绕过 base 干扰，只用浏览器能无歧义识别的绝对片段：
- 写成
href="${location.pathname}#section2"（服务端渲染时注入）或href={window.location.pathname + "#section2"}（React/Vue 客户端） - 动态生成时用
new URL("#section2", document.baseURI).href—— 这个 API 会正确忽略base对 hash 的影响，返回当前页面 URL 拼上#section2 - 避免在 JS 里拼字符串如
"#"+id后直接赋给href，它仍会被base解析为相对路径 - 首次加载带 hash（如
/myapp/page#faq）时，需手动触发滚动：检查location.hash并调用scrollIntoView()，因为路由初始化可能早于 DOM 渲染
容易被忽略的兼容性细节
看似简单的锚点，在 base 存在时，连滚动行为都可能失效：
-
scroll-margin-top必须加在目标元素上，而不是父容器；且只在 Chrome/Firefox/Safari 较新版本生效，老 Safari 需 fallback 到 JS 微调 -
document.getElementById("xxx")返回 null？先确认 id 是否动态生成、是否重复、是否含非法字符（数字开头、空格、中文） - 服务端返回的 HTML 若漏写
<base>或 href 值非法（如href="assets/"），整个标签被静默丢弃，资源 404 和锚点失效会同时发生，但控制台不报错 - 微前端场景下，子应用若自己写了
<base>，和主应用冲突，优先级取决于插入顺序，且无法动态修复
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
