单页应用（SPA）通过浏览器历史API和DOM动态更新实现无刷新路由，路由决定显示内容，状态决定显示形态，现代框架封装了匹配、守卫、嵌套等能力并需注意服务端fallback等陷阱。
单页应用（SPA）不刷新页面就能切换视图，核心靠的是前端路由和状态管理。JavaScript 本身没有内置路由，但可以通过浏览器历史 API（history.pushState、history.replaceState）配合 URL 监听（popstate 事件）来模拟“跳转”，再结合 DOM 动态更新实现页面切换。
用原生 API 手写一个简易前端路由
不依赖框架也能实现基础路由功能：
- 监听 URL 变化：用
window.addEventListener('popstate', ...)捕获浏览器前进/后退； - 手动修改 URL：调用
history.pushState({page: 'about'}, '', '/about')更新地址栏且不刷新； - 匹配路径并渲染：解析
location.pathname，用if或switch判断当前路由，然后替换document.getElementById('app').innerHTML的内容； - 绑定导航链接：给
<a>加onclick阻止默认跳转，改用pushState+ 手动渲染。
路由与页面状态如何协同工作
路由决定“显示什么”，状态决定“显示成什么样”。两者常一起管理：
- URL 路径参数（如
/user/123）可直接作为数据 ID，触发请求获取对应用户信息； - 查询参数（如
?tab=posts&sort=latest）常用于控制列表筛选、排序等 UI 状态； - 滚动位置、表单输入、模态框开关等临时状态，通常不写进 URL，而是存在内存变量或
sessionStorage中； - 若需持久化或分享（如回到某搜索结果页），就把关键状态同步到 URL，保证刷新后可复原。
现代 SPA 框架怎么简化这件事
React Router、Vue Router、Angular Router 等封装了底层逻辑，提供声明式路由配置和组件级状态联动：
立即学习“Java免费学习笔记（深入）”；
- 定义路由表：把路径映射到组件，自动完成匹配、挂载、卸载；
- 路由守卫：在跳转前校验权限或保存草稿；
- 嵌套路由 & 参数解析：自动提取
:id、query，注入组件 props 或 Composition API； - 结合状态管理（如 Redux、Pinia）：路由变化可触发 action，同步更新全局状态和 UI。
避免常见陷阱
手写或使用路由时容易忽略的细节：
- 服务端未配置 fallback：部署到静态服务器时，直接访问
/about会 404，需让所有路径返回index.html； - 未处理重复 pushState：快速点击两次“首页”可能堆叠多个相同 history 记录，可用
replaceState替代； - 忽略可访问性：SPA 切换后要调用
document.title = ...和focus()确保屏幕阅读器感知变化； - 状态丢失：未监听
popstate就只靠链接跳转，会导致浏览器前进/后退失效。
