锚点链接 href="#section2" 在存在 时会被解析为 /myapp/#section2，导致整页重载；应使用 event.preventdefault() 拦截并手动 scrollintoview()，或用 new url("#section2", document.baseuri).href 动态生成正确 hash 链接。
href="#section2" 点击后页面重载？base 正在劫持你的锚点
只要页面里有 <base href="/myapp/">，所有 href="#section2" 都会被浏览器解析成 /myapp/#section2。这不是 bug，是规范行为——但结果往往是整页重载、滚动回顶、SPA 路由不响应。
Network 面板能看到一次对 /myapp/ 的 200 请求（返回完整 HTML），这就是重载证据。控制台不会报错，所以特别难定位。
- 不要指望删掉
<base>解决问题：它常用于资源路径统一，删了可能引发 CSS/JS 404 -
href="javascript:void(0)"能阻止跳转，但破坏语义和键盘可访问性，仅适合纯按钮类交互 - 真正安全的做法是用
event.preventDefault()拦截默认行为，再手动滚动
Vue/React 中怎么写锚点链接才不触发重载
别在模板里直接写 href="#section2"。框架组件如 <router-link></router-link> 或 <link> 内部已调用 preventDefault()，但原生 <a></a> 不会。
推荐写法：
- Vue：
<a>跳到第二节</a>，配合scrollTo(id) { document.getElementById(id)?.scrollIntoView() } - React：
<a onclick="{(e)"> { e.preventDefault(); document.getElementById('section2')?.scrollIntoView(); }}>跳到第二节</a> - 服务端渲染时，可用
href="${location.pathname}#section2"（确保pathname已注入）
用 new URL("#section2", document.baseURI).href 动态生成 href
这是唯一能绕过 <base> 对 hash 干扰的标准 API。它把 #section2 当作片段标识符处理，而不是相对路径，返回的是当前页面 URL 拼上 hash 的绝对地址。
例如当前页是 https://example.com/myapp/page，new URL("#section2", document.baseURI).href 返回 https://example.com/myapp/page#section2，不是 /myapp/#section2。
- 不要手拼字符串：
"#" + id或window.location.href + "#" + id都仍会被 base 解析为相对路径 - 注意兼容性：IE 不支持，但现代项目基本可忽略
- 首次加载带 hash（如
/page#faq）时，需在 DOM 渲染完成后手动调用scrollIntoView()，否则目标元素可能还没挂载
scroll-margin-top 失效？它只作用于目标元素本身
很多人把 scroll-margin-top: 60px 加在导航栏或容器上，结果滚动位置还是不准——这个 CSS 属性必须加在 id="section2" 对应的元素上，浏览器才会在 scrollIntoView() 时预留偏移。
而且它只在 Chrome/Firefox 生效，Safari 目前不支持，需要 fallback：
- 加
scroll-margin-top到目标元素，同时提供 JS fallback：在scrollIntoView()后手动调整window.scrollBy(0, -60) - 避免依赖
<a href="#section2"></a>自动滚动，因为 base 存在时它的行为不可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
