history.pushState - Javascript

简介

history.pushState 是 JavaScript 中的一个方法，用于修改页面的浏览历史记录，同时不会引发页面的实际刷新。它可以在浏览器的地址栏更新 URL，但不会导致页面的重新加载或跳转。这个方法在实现单页面应用(SPA)和前端路由时非常有用。

语法

history.pushState(state, title, url);

• state: 一个表示新浏览历史记录状态的对象。可以通过window.history.state获取到当期状态对象。
• title: 新的页面标题，大多数浏览器目前还不支持这个参数，可以传入空字符串。
• url: 新的 URL 地址，必须是相同源的地址，否则会抛出异常。

使用示例

const stateObj = { data: 'example' };
const title = '';
const url = '/new-url';

history.pushState(stateObj, title, url);

在上面的示例中，我们使用history.pushState方法将浏览器的 URL 更新为/new-url，同时将一个状态对象stateObj关联到新的历史记录。这个状态对象可以通过window.history.state获取到。

注意事项

• history.pushState方法并不会触发页面的实际加载或跳转，它只是在浏览器的访问历史列表中添加一个新的记录。
• 当我们使用history.pushState方法修改 URL 时，实际上页面中的内容并没有改变，只是 URL 发生了变化。因此，如果需要根据不同的 URL 加载不同的内容，需要结合popstate事件来实现对历史纪录变化的监听。

参考链接

• Using the History API - MDN
• Manipulating the browser history - MDN