HTML中base标签与页面跳转行为的关系-html教程-PHP中文网

加了标签后，href="#section2" 会被解析为 /app/#section2 并触发重载；应使用 new url("#section2", document.baseuri).href 或 preventdefault() + scrollintoview() 避免问题。

html中base标签与页面跳转行为的关系

加了 <base> 标签后，页面里所有没写全路径的 href、src、action 都会按它重算——包括你以为“只是跳锚点”的 href="#section2"。这不是 bug，是浏览器严格执行 URL 解析规范的结果。

浏览器把 href="#section2" 当作相对 URL 处理（因为它不以 /、http:// 开头）。一旦页面有 <base href="/app/">，就会拼出 /app/#section2。这个地址和当前页路径不同，导致：

History API 推入新记录，触发 popstate 或整页重载（尤其在 SPA 中）
Network 面板能看到一次对 /app/ 的 200 响应（返回完整 HTML），这是重载证据
滚动不会发生，scrollIntoView() 不被调用，用户卡在顶部
Vue Router / React Router 的 hash 模式可能完全不响应，因为路由监听的是 #section2，不是 /app/#section2

不能删 <base>（资源路径依赖它），也不能硬写 href="page.html#section2"（破坏 SPA 路由）。正确做法是让链接始终指向当前页面的完整 URL + hash：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

服务端渲染时：用模板变量注入 href="{{ .CurrentPath }}#section2"
客户端 React/Vue：写成 href={window.location.pathname + "#section2"}
通用 JS 方案：用 new URL("#section2", document.baseURI).href —— 这个 API 会忽略 <base> 对 hash 的影响，返回当前页 URL 拼上 hash
绝对不要手动拼 "#" + id 后赋给 href，它仍会被解析为相对路径

原生锚点行为在 <base> 存在时已不可信，显式控制更稳妥：

给链接加 onclick="event.preventDefault(); document.getElementById('section2').scrollIntoView({ behavior: 'smooth' });"
注意 scroll-margin-top 必须加在目标元素（如 <h2 id="section2"></h2>）上，不是父容器；且该 CSS 属性在 Firefox 旧版中不支持
首次加载带 hash（如 /app/page#faq）时，需在 DOM 渲染完成后检查 location.hash 并手动调用 scrollIntoView()，否则路由初始化早于 DOM，找不到元素
若用 Vue Router 的 <router-link></router-link> 或 React Router 的 <link>，它们内部已 preventDefault()，不受 <base> 影响，但原生 <a></a> 不会