单页应用（SPA）路由核心是拦截跳转并动态更新界面，利用History API监听URL变化、路由表匹配路径与组件、支持导航守卫及异步加载，最小实现仅需几行代码。
单页应用（SPA）的路由核心是不刷新页面、只切换视图，JavaScript 通过监听 URL 变化并动态渲染内容来实现。关键不在“跳转”，而在“拦截跳转 + 更
新界面”。
监听 URL 变化：用 History API 替代 hash
现代 SPA 推荐使用 history.pushState() 和 history.replaceState() 管理浏览器历史，配合 popstate 事件响应后退/前进。相比旧式 hashchange，它支持真实路径（如 /user/123），更友好也更可控。
- 点击链接时，阻止默认行为，调用
pushState({page: 'user'}, '', '/user/123') - 绑定
window.addEventListener('popstate', e => render(e.state.page)) - 注意：服务端需配置 fallback，所有前端路由都返回 index.html，否则直接访问 /user/123 会 404
匹配路由与渲染组件：简易路由表驱动
把路径模式、对应组件（或渲染函数）组织成一个映射表，导航时遍历匹配即可。不需要复杂正则，基础字符串匹配或简单参数提取已够日常使用。
- 例如：
{ '/': () => renderHome(), '/user/:id': (params) => renderUser(params.id) } - 解析
:id可用pathname.split('/').filter(Boolean)+ 手动对齐，或正则/^\/user\/(\d+)$/.exec(pathname) - 匹配成功后执行渲染函数，传入参数或状态，避免全局变量或重复 DOM 操作
处理导航守卫与异步加载
真实项目中，路由跳转常需权限检查、数据预取或懒加载组件。这些逻辑应封装在路由动作中，而非散落在各处。
- 跳转前调用
beforeEnter: async (to, from) => { if (!auth()) redirect('/login'); await fetchUserData(); } - 组件可按需动态导入：
const User = () => import('./views/User.js')，配合await User()实现代码分割 - 错误边界建议包裹路由出口，统一处理组件加载失败或渲染异常
基本上就这些。不用框架也能跑起来——几行 history 监听 + 一个匹配函数 + 一个渲染入口，就是最小可行路由。复杂度来自状态同步、嵌套路由、滚动复位等细节，但骨架很轻。
