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 方法
处理导航链接与活跃状态
用户点击链接应触发路由跳转而非页面跳转，同时高亮当前激活的菜单项。
立即学习“Java免费学习笔记（深入）”；
- 给所有
标签加data-navigate属性，用事件委托统一拦截点击，读取href，调用pushState+ 渲染 - 维护一个当前路径变量（如
currentPath），每次路由变更后遍历导航元素，对比其href与 currentPath，添加activeclass - 注意：服务端无需为每个前端路由配置真实 HTML 文件，只需确保所有路径都返回同一份 index.html（即“fallback to index”配置）
补充：Hash 模式更简单但有局限
若不需 SEO 或服务端配合，可用 location.hash 实现（兼容老浏览器）。监听 hashchange，从 location.hash.slice(1) 取路径。优点是不用服务端配置，缺点是 URL 含 #、不支持 pushState 状态对象、无法使用 scrollRestoration 等新特性。
不复杂但容易忽略：路由只是胶水，真正决定 SPA 体验的是组件如何复用、数据如何按需加载、错误边界怎么设、以及离开页面前是否要保存状态。把这些串起来，才算是一个可用的单页应用。
