如何使用history.pushState管理URL

avatar
作者
猴君
阅读量:7

要使用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,并实现单页面应用的路由控制。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!