href="#section2"在下被解析为"/myapp/#section2"导致整页重载；应使用new url("#section2", document.baseuri).href生成正确锚点链接，并手动scrollintoview确保滚动。
有 <base> 标签时，href="#section2" 不会跳转到页面内锚点，而是触发整页重载——这不是 bug，是浏览器严格按规范解析相对 URL 的必然结果。
为什么 href="#section2" 在 <base href="/myapp/"> 下会重载
浏览器把所有不以 /、http://、https:// 开头的 href 值都当作“相对路径”处理。#section2 符合这个条件，于是被拼接到 base href 后面，变成 /myapp/#section2。这个 URL 被当成新地址发起导航，服务端返回完整 HTML（哪怕只是 200 状态），页面就刷新了。
- Network 面板能看到一次对
/myapp/的请求，响应体是整页 HTML - 控制台无报错，但滚动位置重置、SPA 路由不响应、
hashchange事件没触发 - 哪怕目标元素存在且
id="section2"正确，也完全没机会滚动
如何安全生成锚点链接（绕过 <base> 干扰）
核心思路：让浏览器拿到的最终 URL 是当前页面 URL 拼上 #xxx，而不是 base 拼接的结果。用 new URL() API 最可靠：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const hashUrl = new URL("#section2", document.baseURI).href;
// 返回类似 "https://example.com/myapp/page#section2"，不是 "/myapp/#section2"
- 不要手拼：
href="/myapp/page#section2"在路由变化后会失效 - 不要写
href="${location.pathname}#section2"——location.pathname不含查询参数，且首次加载带 hash 时可能为空 - 服务端渲染时可注入
window.__CURRENT_URL__，客户端直接用new URL("#section2", window.__CURRENT_URL__)
点击后如何确保滚动到目标元素
即使链接正确，首次加载带 hash（如 /myapp/page#faq）时，DOM 可能还没就绪，scrollIntoView() 会失败。必须手动触发：
- 在 SPA 初始化完成后检查
location.hash，再调用document.querySelector(location.hash)?.scrollIntoView() - 给目标元素加
scroll-margin-top（如scroll-margin-top: 80px），避免被固定头部遮挡 - 避免用
href="javascript:void(0)"：语义丢失、键盘不可访问、无法右键复制链接 - Vue/React 中优先用
@click.prevent或onClick={e => { e.preventDefault(); el.scrollIntoView() }}，不依赖原生<a></a>行为
容易被忽略的 <base> 配置细节
<base> 的 href 值必须是绝对 URL 或根相对路径（以 / 开头且结尾带 /），否则浏览器静默忽略：
- ❌
<base href="myapp/">：不是绝对或根相对，无效 - ❌
<base href="/myapp">：结尾缺/，拼接logo.png变成/myapplogo.png（404） - ✅
<base href="/myapp/">或<base href="https://example.com/myapp/"> -
<base>必须放在最前面，且只能有一个
真正难的不是写对链接，而是在构建配置、Service Worker 缓存、路由守卫、甚至 fetch() 请求中，保持所有路径逻辑与 <base> 解析规则一致——漏掉一处，就可能在某个环境里突然 404 或跳转错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
