单页面应用（SPA）路由通过前端JavaScript动态切换视图，核心是监听URL变化、匹配路径并渲染组件。可基于History API（pushState/replaceState/popstate）或Hash模式（hashchange）实现，推荐使用Vue Router或React Router等成熟方案，并需服务端配合fallback至index.html。
单页面应用（SPA）的路由不依赖服务端跳转，而是通过前端 JavaScript 动态切换视图，同时保持 URL 可访问、可刷新、可前进后退。核心在于监听 URL 变化、匹配路径、渲染对应组件，不重载页面。
使用原生 History API 手动实现简易路由
浏览器提供 history.pushState()、history.replaceState() 和 popstate 事件，可完全控制地址栏和导航行为。
- 用
pushState()替代location.href跳转，避免刷新 - 监听
window.addEventListener('popstate', handler)捕获浏览器前进/后退 - 初始加载时需读取
location.pathname并手动匹配一次，否则刷新页面会白屏 - 示例：点击链接时调用
history.pushState({path: '/about'}, '', '/about')，再触发视图更新
用 hash 模式快速兼容老浏览器
利用 URL 中 # 后面的部分（即 hash），它变化不会导致页面刷新，且可通过 hashchange 事件监听。
- URL 示例：
https://site.com/#/home、https://site.com/#/user/123 - 监听
window.addEventListener('hashchange', () => { render(routerMap[location.hash.slice(1)]) }) - 跳转用
location.hash = '/user/123'即可，无需额外状态管理 - 缺点是 URL 不够美观，SEO 不友好，但兼容性极佳（IE8+）
推荐：用 Vue Router 或 React Router 管理复杂路由
实际项目中不建议手写完整路由系统，主流框架生态已提供成熟方案，支持嵌套路由、路由守卫、懒加载、参数解析等。
立即学习“Java免费学习笔记（深入）”；
- Vue Router：定义
routes数组，每个项含path、component、children；用 - React Router v6：使用
useNavigate()替代 history 方法 - 两者都自动处理 history 模式或 hash 模式切换，也支持服务端同构（SSR）适配
注意服务端配合（history 模式必需）
启用 history 模式后，用户直接访问 /user/123 会向服务端发起请求——但服务端通常没有这个真实路径，会返回 404。
- 解决方法：服务端所有非 API 请求都 fallback 到
index.html - Nginx 配置示例：
location / { try_files $uri $uri/ /index.html; } - Webpack Dev Server 可设
historyApiFallback: true自动处理开发环境
基本上就这些。选对模式、监听对事件、匹配好路径、服务端兜住底，路由就稳了。
