JavaScript前端路由主要依靠History API实现无刷新页面切换，通过pushState/replaceState修改URL并用popstate监听导航，配合路径匹配与组件渲染；旧浏览器可降级使用hashchange事件。
JavaScript实现路由功能主要依靠浏览器的History API和URL变化监听，不依赖后端就能完成页面切换和状态管理。
使用原生History API控制地址栏和历史记录
通过pushState和replaceState可以修改URL而不刷新页面，配合popstate事件监听浏览器前进/后退操作：
- history.pushState(state, title, url)：添加新历史记录，例如history.pushState({page: 'about'}, '', '/about')
- history.replaceState()：替换当前历史记录，适合更新参数但不新增记录
- 监听window.addEventListener('popstate', handler)，在用户点击返回/前进时触发，读取event.state恢复页面状态
监听URL变化并匹配路由规则
每次URL变动（包括pushState触发）都需解析路径并执行对应逻辑：
- 用location.pathname获取当前路径，如'/user/123'
- 可用正则或字符串方法匹配路由，例如/^\/user\/(\d+)$/.exec(pathname)提取ID
- 根据匹配结果动态渲染组件、加载数据或更新DOM，避免整页刷新
封装简易前端路由器类
把上述逻辑组织成可复用结构，支持注册路由、跳转和自动响应：
立即学习“Java免费学习笔记（深入）”；
- 维护一个routes对象，键为路径模式（如'/post/:id'），值为处理函数
- 提供router.navigate(url)方法，内部调用pushState并立即执行匹配逻辑
- 在popstate回调中再次匹配当前路径，保证前进/后退也正确响应
- 支持简单参数解析（如:id）和通配符（如*）
注意哈希路由作为兼容方案
在不支持History API的旧环境（如IE9）中，可用hashchange事件配合location.hash实现类似效果：
- URL形如example.com/#/settings，改变hash不会触发页面刷新
- 监听window.addEventListener('hashchange', ...)，解析location.hash.slice(1)获取路径
- 现代项目通常优先用History模式，哈希模式仅作降级备用
