如何通过HTML5中HistoryAPI构建一套无刷新的单页面应用路由系统

HTML5 History API单页路由核心是拦截导航、更新URL、响应历史变化；通过pushState修改地址栏、popstate监听前进后退、初始读取pathname匹配路径、服务端配置404回退至index.html。

用 HTML5 History API 构建无刷新单页应用路由系统，核心是三件事：拦截导航、更新 URL、响应历史变化。它不依赖框架，纯原生 JS 就能跑起来，关键是把 pushState、popstate 和 URL 解析串成闭环。

拦截点击并更新 URL

用户点链接时，阻止默认跳转，改用 JavaScript 控制：

• 给所有带 href 的导航链接加事件监听（比如 a[data-router]）
• 调用 e.preventDefault() 阻止页面刷新
• 提取目标路径（如 /about），执行 history.pushState({ path: '/about' }, '', '/about')
• 紧接着加载对应内容（渲染模板、请求数据、替换 DOM）

监听浏览器前进/后退

用户点后退或前进按钮时，URL 变了但页面不会自动反应，必须手动接管：

• 注册 window.addEventListener('popstate', handler)
• 在 handler 中读取 event.state?.path；若为空（比如直接访问或刷新），就 fallback 到 location.pathname
• 根据路径重新加载内容，保持视图与 URL 同步

处理初始加载和 URL 匹配

页面首次打开或刷新时，history.state 是 null，不能只靠 popstate：

立即学习“前端免费学习笔记（深入）”；

• 在脚本启动时，主动读取 location.pathname，调用一次渲染逻辑
• 建议封装一个 router.match(path) 函数，把路径映射到组件/模板/数据加载逻辑
• 支持简单参数解析，例如 /user/123 可提取 id = 123，用于后续 fetch

服务端配合不可少

History 模式用的是真实路径（如 /dashboard），不是哈希（#dashboard）。这意味着用户直接输入或分享该 URL 时，服务器必须返回你的主 HTML 文件（通常是 index.html）：

• Nginx：配置 try_files $uri $uri/ /index.html;
• Apache：启用 mod_rewrite，添加 RewriteRule 回退规则
• Vercel/Netlify：在 _redirects 或 vercel.json 中设置 404 重定向到 /

不复杂但容易忽略——只要这四步串通，你就有了一个轻量、可控、SEO 友好的前端路由基础。