(HTML5)pushState/replaceState实现无刷新改变内容及地址栏

### 单页应用程序中的前端路由 在单页应用程序(SPA)中，`pushState()` 和 `replaceState()` 方法用于实现无刷新页面加载的导航效果。HTML5 History API 提供了这些方法来修改浏览器的历史记录栈以及URL地址栏的内容。 #### 使用 pushState 实现新状态添加 当调用 `history.pushState(stateObj, title, url)` 时，会在历史记录堆栈顶部添加一个新的条目，并更新当前显示的URL为指定的新路径，但不会触发页面重新加载。这使得可以在不重载整个网页的情况下更改视图或数据[^1]。 ```javascript // 添加新的浏览历史记录项并改变URL const newState = {}; window.history.pushState(newState, "", "/new-url"); ``` #### 使用 replaceState 修改现有状态 通过执行 `history.replaceState(stateObj, title, url)` 可以覆盖掉当前的历史位置而不增加额外的历史记录入口。这意味着如果用户点击返回按钮，则会跳转到前一个实际访问过的页面而不是刚刚被替换的状态[^2]。 ```javascript // 替换当前浏览历史记录项并改变URL const stateData = {}; window.history.replaceState(stateData, "", "/replaced-url"); ``` 为了监听由上述两种方式引起的位置变化事件，在JavaScript中可以绑定 `popstate` 事件处理器： ```javascript window.addEventListener('popstate', (event) => { console.log(`Location changed to ${location.pathname}`); }); ``` Angular框架默认采用基于此API构建的路由机制工作模式，即利用`pushState(...)`和`replaceState(...)`函数操作浏览器地址而无需刷新整个文档对象模型(DOM)。对于偏好哈希(#)风格链接的应用程序开发者来说，也可以配置 Angular 的路由模块启用hash-based 路径定位策略。