JavaScript实现路由的核心是利用History API（pushState/replaceState）改变URL且不刷新页面，并监听popstate事件响应视图更新；需维护路由表、匹配路径、动态渲染组件，同时拦截链接点击并管理激活状态。

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 模式更简单但有局限

若不需 SEO 或服务端配合，可用 location.hash 实现（兼容老浏览器）。监听 hashchange，从 location.hash.slice(1) 取路径。优点是不用服务端配置，缺点是 URL 含 #、不支持 pushState 状态对象、无法使用 scrollRestoration 等新特性。

不复杂但容易忽略：路由只是胶水，真正决定 SPA 体验的是组件如何复用、数据如何按需加载、错误边界怎么设、以及离开页面前是否要保存状态。把这些串起来，才算是一个可用的单页应用。