要使用history.pushState來管理URL,首先需要調用pushState()方法。該方法接受三個參數:狀態對象(state object)、標題(title)和可選的URL。
例如,要在URL中添加一個新的查詢參數,可以這樣做:
const newUrl = new URL(window.location.href);
newUrl.searchParams.set('param', 'value');
history.pushState(null, null, newUrl.toString());
這將向瀏覽器歷史記錄添加一個新的狀態,并且URL將包含新的查詢參數。可以通過調用popstate事件監聽器來監聽URL變化,并在需要時執行相應的操作。
window.addEventListener('popstate', function(event) {
// 在這里執行需要的操作
});
通過這種方式,可以使用history.pushState來動態管理URL,并實現單頁面應用的路由控制。