JavaScript路由实现与SPA开发详解

本文深入剖析了如何用原生 JavaScript 构建单页面应用（SPA）的核心——前端路由，重点围绕 History API 的实际运用展开：通过 pushState/replaceState 无刷新变更 URL，监听 popstate 响应浏览器导航，手写路径匹配与参数提取逻辑，动态渲染组件，并统一拦截链接点击、管理激活状态；同时对比了 Hash 模式的优劣，强调路由本质是连接 URL 与视图的“胶水”，而真正决定 SPA 体验的，是组件复用、按需加载、错误处理与状态保持等系统性设计——读懂这些，你就能脱离框架束缚，从原理出发打造健壮灵活的单页应用。

JavaScript 实现路由的核心是不刷新页面的前提下改变 URL 并响应视图变化，这正是单页面应用（SPA）的基础。关键不在于用哪个库，而在于理解浏览器历史机制与 DOM 动态更新的配合逻辑。

用原生 History API 控制地址栏和前进后退

现代 SPA 路由依赖 history.pushState() 和 history.replaceState() 修改 URL，同时监听 popstate 事件响应浏览器回退/前进操作。注意：直接修改 location.href 或 hash 会触发页面重载或仅触发 hashchange，而 pushState 不刷新页面，且支持传递状态对象。

• 初始化时用 history.replaceState() 统一当前路径状态，避免首次加载多压一次历史记录
• 绑定 window.addEventListener('popstate', handler)，在 handler 中解析 event.state 或 location.pathname 决定渲染哪块视图
• 点击链接时阻止默认行为，调用 pushState() 并立即更新界面，不要等 URL 变化后再响应——因为 URL 已同步更新，但视图需手动驱动

匹配路由路径并动态渲染组件

路由本质是“路径字符串”到“渲染逻辑”的映射。可手写简单匹配器，也可用正则或路径解析库处理带参数的路由（如 /user/123）。

• 定义路由表：一个数组或对象，每项含 path（支持 :id 占位符）、component（函数或模板字符串）
• 编写匹配函数：将当前 location.pathname 与各 route.path 比对，提取参数，返回匹配项和 params
• 渲染时清空容器（如 document.getElementById('app').innerHTML = ''），再插入新内容；若用虚拟 DOM，就调用对应组件的 render 方法

处理导航链接与活跃状态

用户点击链接应触发路由跳转而非页面跳转，同时高亮当前激活的菜单项。

• 给所有 标签加 data-navigate 属性，用事件委托统一拦截点击，读取 href，调用 pushState + 渲染
• 维护一个当前路径变量（如 currentPath），每次路由变更后遍历导航元素，对比其 href 与 currentPath，添加 active class
• 注意：服务端无需为每个前端路由配置真实 HTML 文件，只需确保所有路径都返回同一份 index.html（即“fallback to index”配置）

补充：Hash 模式更简单但有局限