溫馨提示×

如何使用history.pushState管理URL

小樊
104
2024-06-29 10:56:30
欄目: 編程語言

要使用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,并實現單頁面應用的路由控制。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女