17370845950

单页应用（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 监听 + 一个匹配函数 + 一个渲染入口，就是最小可行路由。复杂度来自状态同步、嵌套路由、滚动复位等细节，但骨架很轻。