JavaScript路由与单页应用实现解析

不需要框架，10 行内可跑通基础路由切换。核心是三件事：注册路由表、劫持链接点击、响应 URL 变化。

const routes = {
  '/': () => document.body.innerHTML = '<h2>Home</h2>',
  '/about': () => document.body.innerHTML = '<h2>About</h2>',
  '/user': () => document.body.innerHTML = '<h2>User</h2>'
};

const navigate = (url) => {
  history.pushState({ url }, '', url);
  routes[url]?.();
};

window.addEventListener('popstate', e => routes[e.state?.url]?.());
document.addEventListener('click', e => {
  if (e.target.matches('a[data-router]')) {
    e.preventDefault();
    navigate(e.target.href.split(window.location.origin)[1]);
  }
});

注意：data-router 是自定义属性，用于区分哪些链接交给 JS 路由处理；e.target.href.split(window.location.origin)[1] 是为兼容完整 URL，提取 pathname 部分。

为什么不能只依赖 hash 路由？

location.hash 确实能避开刷新，但有硬伤：SEO 不友好、服务端无法感知、URL 中带 # 显得过时。现代 SPA 几乎全用 history 模式。

• hash 变化触发 hashchange，无需 pushState，但 URL 是 https://site.com/#/user，不是 https://site.com/user
• 服务端对 /#anything 一律返回 200，所以 hash 路由部署简单，但不利于 SSR 和预渲染
• 部分老系统（如 IE9）不支持 pushState，此时 hash 是降级方案，不是首选

刷新后如何恢复页面状态？

用户直接访问 /user 或按 F5，浏览器会向服务端请求该路径——此时前端 JS 尚未执行，必须靠服务端兜底返回 index.html，再由 JS 读取 location.pathname 手动匹配路由。

也就是说，首次加载时没有 popstate，要主动执行一次：

const currentPath = window.location.pathname;
routes[currentPath]?.();

这个逻辑必须放在脚本最开头，否则白屏几毫秒。如果路由逻辑复杂（比如要异步加载组件），就得搭配 DOMContentLoaded 或 defer 加载脚本，但别等 load——太晚。

真正容易被忽略的是：服务端配置错误导致刷新 404，比 JS 写错更难排查；而前端忘记处理初始路径，会导致首屏空白，且控制台无报错。

好了，本文到此结束，带大家了解了《JavaScript路由与单页应用实现解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！