JavaScript浏览器History API是实现前端路由的核心机制，通过pushState和replaceState修改URL不刷新页面，并用popstate事件监听路由变化，配合HTML5模式或hash模式实现单页应用导航。
JavaScript 浏览器 History API 是实现前端路由的核心机制，它让单页应用（SPA）能在不刷新页面的前提下改变 URL 并响应路由变化。
用 pushState 和 replaceState 管理 URL 和历史记录
History API 提供 pushState() 和 replaceState() 方法来修改浏览器地址栏，同时不触发页面跳转：
-
pushState(state, title, url)：向历史栈添加一条新记录，用户点击后退会回到上一个状态；state是可序列化的 JS 对象，用于存储路由相关数据（如当前路径、参数）；title当前被忽略，传空字符串即可；url是相对或绝对路径（需同源） -
replaceState(state, title, url)：替换当前历史记录，常用于初始化路由或重定向时避免多余历史项 - 两者都不会触发页面加载，但会更新地址栏，并允许后续通过
popstate监听变化
监听 popstate 事件响应路由变化
当用户点击浏览器前进/后退按钮，或调用 history.back() 等方法时，会触发 popstate 事件：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 该事件的
event.state就是之前pushState或replaceState传入的 state 对象 - 需在页面加载后立即绑定监听，且注意首次加载页面时不会触发
popstate，需手动读取location.pathname初始化视图 - 示例：
window.addEventListener('popstate', e => renderRoute(e.state?.path || location.pathname))
配合 hash 或 HTML5 History 模式选择
History API 默认使用 HTML5 History 模式（干净的 URL，如 /user/123），但需服务端配合：所有前端路由路径都应返回同一份 HTML（如 index.html），否则直接访问会 404；若无法控制服务端，可用 hash 模式（URL 形如 #/user/123），靠监听 hashchange 实现，无需服务端配置
立即学习“Java免费学习笔记（深入）”；
- HTML5 模式更友好，但部署时必须确保服务器对所有路由返回主入口文件
- Hash 模式兼容性更好，但 URL 不够美观，且搜索引擎对 hash 内容索引有限
- 现代框架（如 React Router、Vue Router）默认优先用 History 模式，并提供 fallback 配置说明
手动实现一个极简前端路由器
不依赖框架也能快速搭建基础路由逻辑：
- 维护一个路由表（对象映射 path → 渲染函数）
- 定义
router.push(path)：调用history.pushState({ path }, '', path)+ 手动渲染 - 定义
router.init()：读取当前location.pathname渲染初始页面，并监听popstate - 可扩展支持动态参数（如
/user/:id）、嵌套路由、守卫等，但核心始终围绕 state 管理与事件响应
