单页面应用（SPA）路由通过History API或Hash模式实现无刷新视图切换，核心是监听URL变化并动态渲染；需服务端配合History模式兜底，手写路由可实现基础功能，但复杂场景应使用成熟路由库。
单页面应用（SPA）的路由不依赖服务端跳转，而是通过前端 JavaScript 操作浏览器历史和 URL 状态，在不刷新页面的前提下切换视图。核心在于监听 URL 变化、匹配路径、动态渲染对应内容。
路由的核心机制：URL 监听 + 视图更新
SPA 路由不触发页面重载，靠的是浏览器提供的两个关键 API：
-
History API（
pushState/replaceState）：修改 URL 地址栏且不刷新页面，同时可存入任意状态对象； -
popstate 事件：监听用户点击前进/后退按钮或调用
history.back()等导致 history 栈变化的操作。
当用户点击导航链接时，JS 阻止默认跳转，调用 pushState 更新 URL，并手动渲染新内容；当用户点返回按钮，popstate 触发，再根据当前 location.pathname 或 state 数据重新渲染。
两种常见模式：Hash 模式 vs History 模式
Hash 模式（如 #/user）利用 URL 中 # 后面的片段（hash），它变化不会向服务器发请求，也不触发页面刷新。监听 hashchange 事件即可响应路由变化。兼容性好，无需服务端配合。
立即学习“Java免费学习笔记（深入）”；
History 模式（如 /user）更美观，依赖 History API。但有个关键前提：所有前端路由路径都必须指向同一个 HTML 入口文件（如 index.html）。否则直接访问 /about 会被服务端当作真实路径处理，返回 404。需服务端配置「兜底」——将所有未知路径返回 index.html。
简易手写一个基础路由
不需要框架也能实现最小可行路由：
- 用
location.pathname获取当前路径； - 定义路由表，比如
{ '/': Home, '/user': User }； - 写一个
router.render()函数，根据路径查表并挂载对应组件； - 监听
popstate和hashchange，调用render()； - 封装
router.push(path)方法：调用history.pushState并立即渲染。
这样就完成了路径解析、视图切换、前进后退响应三个基本能力。
为什么需要路由库（如 Vue Router、React Router）？
真实项目中路由远不止跳转那么简单：
- 嵌套路由（子菜单、Tab 内部页面）；
- 路由守卫（登录校验、权限拦截）；
- 参数解析（
/user/:id、查询参数、模糊匹配）； - 懒加载（按需加载组件，提升首屏性能）；
- 滚动行为保持（返回列表页时恢复之前滚动位置）。
这些逻辑组合起来复杂度高，轮子成熟稳定，建议业务中直接使用主流路由库，而非重复造轮子。
