如何运用HTML5 History API实现无刷新URL跳转？

本文共计874个文字，预计阅读时间需要4分钟。

直接调用`history.pushState()`不会触发页面刷新，也不会自动加载新内容——它仅修改URL和浏览器的历史记录，后续渲染由自身完成。许多人误以为调用完毕就会跳转，但结果页面保持静止，控制台也无错误提示。

• 必须配合路由监听（popstate 事件）或手动更新 DOM/组件
• pushState() 第一个参数（state）不能是 undefined 或函数，否则某些浏览器（如旧版 Safari）会静默失败
• 第二个参数（title）目前所有主流浏览器都忽略，传空字符串 '' 最安全
• 第三个参数（url）必须同源，跨域会直接抛 SecurityError

popstate 事件什么时候触发？

popstate 只在用户点击浏览器「后退」「前进」按钮，或调用 history.back()、history.forward() 时触发，不会 在 pushState() 或 replaceState() 调用时触发。