javascript如何实现路由功能_如何构建一个简单的单页面应用路由器？_技术教程

原生 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，可能相互干扰；应确保只绑定一次，并把路由分发逻辑集中处理。

window.addEventListener('popstate', (event) => {
  const path = location.pathname;
  if (path === '/home') renderHome();
  else if (path === '/about') renderAbout();
  else renderNotFound();
});

怎么让点击时不跳转而是走前端路由

必须拦截所有符合“内部路径”的标签点击事件。关键不是靠 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 只给你地基，上面盖什么，还得你自己一砖一瓦垒。