如何在JavaScript中更改URL路径

有时候我们需要在JavaScript中更改当前页面的URL路径，比如在跳转页面之前动态的修改URL中的参数等等。本文将介绍如何在JavaScript中实现这个功能。

方案一：使用window.location.href

最简单的方法就是使用window.location.href对象，它包含当前页面的URL信息，并可以直接修改它来改变当前页面的URL。例如：

window.location.href = "http://example.com";

这个例子会将当前页面重定向到http://example.com。

对于更改URL路径而不是完整URL，我们可以将新路径拼接到原URL中，如下：

var newUrl = window.location.pathname + "?param=value";
window.location.href = newUrl;

这个例子将把当前URL路径后面加上一个查询参数param=value。

方案二：使用history.pushState()

HTML5引入了history API，它提供了pushState()和replaceState()方法，可以在不刷新页面的情况下操作浏览器历史记录。pushState()允许我们改变当前页面的URL，但不会导致页面刷新或跳转。例如：

history.pushState(null, null, "/new-path");

这个例子将当前页面的URL路径改为/new-path。需要注意的是，使用pushState()修改URL之后，浏览器地址栏中显示的URL和实际发出的网络请求的URL并不一定相同，因为pushState()只是修改浏览器历史记录中的URL，而不会导致实际的跳转。

另外，pushState()方法接受三个参数，分别是状态对象、页面标题和URL。其中，状态对象可以在后续使用history API的back()、forward()、go()等方法时被访问到，页面标题在现代浏览器中已经没有意义了，URL参数是必须的。

如果需要在pushState()之后修改页面内容，可以使用window.onpopstate事件来监听浏览器后退或前进按钮的点击操作，然后根据history.state对象中的信息更新页面内容：

window.onpopstate = function(event) {
  // 根据event.state中的信息更新页面内容
};

方案三：使用location.replace()

最后一个方案是使用location.replace()方法，它和location.href比较类似，也可以修改当前页面的URL，并立即跳转到新的URL。例如：

location.replace("/new-path");

这个例子将立即跳转到/new-path页面，并将浏览器历史记录中的当前页面替换为新页面。需要注意的是，因为location.replace()会导致页面刷新和跳转，因此使用之前应该仔细考虑一下是否需要这种行为。

以上就是在JavaScript中更改URL路径的三种方案，不同的场景可以选择不同的方案来实现相应的功能。