答案：利用History API和URLPattern实现轻量级前端路由，支持动态与嵌套路由。通过监听popstate和拦截锚点点击实现无刷新导航，结合动态导入按需加载组件，并在切换前执行钩子逻辑。初始化时匹配当前路径并绑定全局监听，确保单页应用体验，整个系统零依赖且易于扩展。
构建一个零依赖的现代化 JavaScript 路由器，关键是利用浏览器原生能力，避免引入外部库，同时支持动态路由、嵌套路由和组件化加载。核心依赖的是 History API 和 URL Pattern Matching，结合事件监听与模块化设计，即可实现轻量高效的前端路由系统。
使用 History API 管理导航状态
现代浏览器提供 pushState、replaceState 和 popstate 事件，可在不刷新页面的情况下操作 URL 并响应前进后退。
- 调用 history.pushState() 更新 URL 并添加历史记录条目
- 监听 window.popstate 事件，捕获用户点击返回或前进的行为
- 阻止默认链接跳转，通过 JS 手动触发路由切换，保持单页应用体验
例如，拦截所有锚点点击：
document.addEventListener('click', e => { if (e.target.matches('a[href]')) { e.preventDefault(); const url = new URL(e.target.href); window.history.pushState({}, '', url.pathname); navigate(url.pathname); } });实现基于路径模式的路由匹配
使用 URLPattern（现代浏览器支持）或正则表达式解析动态路由参数，如 /user/123 中提取 ID。
立即学习“Java免费学习笔记（深入）”；
- 定义路由表，将路径模板映射到处理函数或异步组件
- 对每条路由尝试匹配当前路径，优先精确匹配，再试动态路径
- 提取参数并传递给视图函数，支持类似 :id 的占位符语法
示例结构：
const routes = [ { path: '/', handler: () => render(Home) }, { path: '/user/:id', handler: ({ id }) => render(User, { id }) } ];
支持异步组件加载与生命周期
利用 ES 模块动态导入（import()），按需加载页面组件，减少初始加载体积。
- 路由处理器返回 Promise，等待组件加载完成后再渲染
- 在切换前可执行权限检查、数据预取等逻辑
- 提供 onEnter 或 beforeLoad 钩子控制导航流程
简单实现：
async function navigate(path) { for (const route of routes) { const match = new URLPattern({ pathname: route.path }).exec(path); if (match) { const args = match.pathname.groups; return route.handler(args); } } render(NotFound); }初始化路由并监听变化
启动时立即执行一次路由匹配，并绑定 popstate 监听器，确保所有导航都被捕获。
- 首次加载调用 navigate(location.pathname)
- 监听 popstate 处理浏览器前进后退
- 暴露 router.navigate(path) 方法供内部调用
基本入口：
window.addEventListener('popstate', () => navigate(location.pathname)); navigate(location.pathname);基本上就这些。一个轻量、可扩展、无依赖的路由器不需要复杂的设计，只需紧扣浏览器能力与清晰的匹配逻辑。关键在于解耦路由配置与渲染机制，保持接口简洁。不复杂但容易忽略。
