原生 JavaScript 模拟 history.pushState 跳转需拦截 a 标签点击、阻止默认行为、调用 pushState 更新 URL 并手动渲染视图；监听 popstate 响应浏览器前进/后退；须传入合法 state 对象及同源 URL，并手动维护路由状态以支持参数解析与复杂路由逻辑。
怎么用原生 JavaScript 模拟 history.pushState 跳转但不刷新页面
核心是拦截链接点击、阻止默认行为，再手动更新 URL 并触发视图变化。浏览器原生支持 history.pushState 和 history.replaceState，它们不会触发页面重载，但也不会自动触发任何回调——你得自己监听 popstate 事件来响应后退/前进。
常见错误：直接改 location.href 或 location.hash（后者虽不刷新，但语义弱、SEO 差、且需额外监听 hashchange）；或者调用 pushState 后忘记手动渲染对应视图。
- 必须给
pushState传入一个可序列化的state对象（哪怕为空{}），否则某些 Android WebView 会抛错 -
pushState的第三个参数（URL）必须是同源的，跨域会静默失败 - 首次进入页面时，
popstate不会触发，需手动读取location.pathname初始化视图
如何监听浏览器前进/后退并更新 UI
popstate 是唯一可靠的原生事件，但它只在用户点击浏览器前进/后退按钮，或调用 history.back()/history.forward() 时触发——不会响应 pushState 或 replaceState 调用本身。
容易被忽略的是：如果多个模块都绑定 popstate，可能相互干扰；应确保只绑定一次，并把路由分发逻辑集中处理。
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('popstate', (event) => {
const path = location.pathname;
if (path === '/home') renderHome();
else if (path === '/about') renderAbout();
else renderNotFound();
});
怎么让 <a href="/xxx"></a> 点击时不跳转而是走前端路由
必须拦截所有符合“内部路径”的 <a></a> 标签点击事件。关键不是靠 class 或 data 属性标记，而是用路径匹配规则判断是否为前端路由目标。
常见坑：未阻止默认行为导致页面刷新；或拦截了外部链接（如 https://example.com）、锚点（#section）、空链接（href="#"）造成误伤。
- 用
event.currentTarget instanceof HTMLAnchorElement确保只处理 a 标签 - 检查
href是否为绝对同源路径（startsWith(window.location.origin)）或相对路径（href.startsWith('/') && !href.startsWith('//')） - 调用
event.preventDefault()后，再执行history.pushState({}, '', href)和视图更新
为什么需要手动维护当前路由状态，不能只依赖 location.pathname
因为 location.pathname 总是反映地址栏真实值，看似够用。但在复杂场景下它不可靠：比如服务端渲染首屏后，前端路由尚未接管；或异步加载路由组件时，pathname 已变但视图还未更新，导致竞态；又或者你希望支持带参数的路由（如 /user/123），仅靠 pathname 字符串匹配易出错且难扩展。
更稳健的做法是封装一个 Router 实例，内部保存 currentPath 和 routes 映射表，提供 on('/user/:id', handler) 这类声明式注册方式，并在 pushState 和 popstate 中统一触发匹配与更新。
真正麻烦的从来不是跳转，而是参数解析、嵌套路由、守卫逻辑、滚动复位这些——原生 API 只给你地基，上面盖什么，还得你自己一砖一瓦垒。
