如何在 JavaScript 中更新 URL 而無需重新加載頁面

HTML5 History API 提供 pushState() 和 replaceState() 分別用於在不重新加載頁面的情況下添加和修改瀏覽器歷史記錄的方法。

pushState() 方法

pushState() 方法更新 URL 並在瀏覽器歷史記錄中創建一個新條目，而無需重新加載頁面。

這是它的樣子：

history.pushState(state, title, url);

state 是一個包含一些與新 URL 相關的數據的對象。可以使用 JavaScript history.state 檢索它 屬性。

title 是瀏覽器應該顯示的新頁面標題。但是，它有時會被瀏覽器完全忽略。

最後，url 是您要添加到瀏覽器歷史記錄而不重新加載頁面的新 URL。

這是一個例子：

history.pushState({
    id: 'about-me',
    source: 'web'
}, 'About me', 'https://attacomsian.com');

replaceState() 方法

replaceState() 是另一種在不重新加載頁面的情況下更新 URL 的方法。它的工作方式與 pushState() 完全相同 ，但會替換現有的瀏覽器歷史記錄條目，而不是添加一個新條目。

理想情況下，僅當您想更改 URL 而不在瀏覽器歷史記錄中留下任何痕跡時才應使用此方法：

history.replaceState({
    id: 'JavaScript Tutorials',
    source: 'web'
}, 'All JavaScript Tutorials', 'https://attacomsian.com/topics/javascript');