JavaScript实现SPA的核心是利用history.pushState修改URL、监听popstate事件响应导航、动态匹配路由并更新DOM，需拦截a标签点击、服务端配置兜底返回index.html。
用 JavaScript 实现路由和单页应用（SPA），核心是监听 URL 变化、按需加载内容、避免整页刷新。不需要框架也能做到，关键是掌握 history.pushState、popstate 事件和 DOM 动态更新。
监听地址栏变化，不刷新页面
浏览器提供 window.history API 来操作导航记录，配合 pushState 和 replaceState 可以修改 URL 而不触发跳转。
- 点击链接时阻止默认行为，调用
history.pushState(state, title, url)更新地址栏 - 监听
window.addEventListener('popstate', handler)捕获浏览器前进/后退动作 -
state参数可传入任意对象，用于保存页面状态（比如当前页码、筛选条件）
定义路由规则并匹配路径
把 URL 路径映射到对应视图或处理函数，可用简单正则或更清晰的键值对方式：
- 例如：
{ '/': homePage, '/about': aboutPage, '/posts/:id': postDetail } - 解析
location.pathname，逐条比对：对带参数的路径（如/posts/123），用正则提取id并传给渲染函数 - 推荐用
URLPattern（现代浏览器支持）做匹配，语义清晰且支持命名组
动态渲染内容，管理视图生命周期
每次路由切换，应卸载旧组件、加载新内容、更新 DOM，而不是简单地 innerHTML = ...：
立即学习“Java免费学习笔记（深入）”；
- 为每个路由准备一个渲染函数，返回 HTML 字符串或直接操作 DOM 节点
- 如果用了模块化结构，可配合
import()动态导入对应模块（实现代码分割） - 注意清理副作用：取消未完成的请求、移除事件监听器、暂停定时器等
处理链接点击和 SEO 基础适配
用户点击 <a href="/about"></a> 时，默认会刷新页面——需要统一拦截：
- 给根容器（如
#app）委托绑定click事件，判断目标是否为站内链接 - 匹配成功后调用
pushState+ 手动渲染，再event.preventDefault() - 服务端需配置所有前端路由都返回同一份 HTML（如
index.html），否则直接访问子路径会 404
基本上就这些。不复杂但容易忽略细节，比如没监听 popstate 就无法响应后退键，或者没拦截 a 标签导致意外刷新。写个小 demo 跑通一次，后面扩展功能（嵌套路由、守卫、懒加载）就顺了。
