JavaScript 在没有重定向的情况下更改 URL

在 Web 开发中，有时我们需要更改当前页面的 URL，但不希望进行重定向。这时，我们可以使用 JavaScript 来修改 URL，而不会导致页面跳转。

修改 URL 的方式

方法一：使用 window.history

可以使用 window.history 对象的 pushState() 方法或 replaceState() 方法来修改当前 URL，而不会重定向页面。

pushState() 方法会将新的 URL 添加到浏览器历史记录中，并且不会刷新页面。replaceState() 方法会用新的 URL 替换当前 URL，同样也不会刷新页面。

下面是 pushState() 方法的示例代码：

window.history.pushState(null, null, '/new-url');

方法二：使用 location.replace()

可以使用 location.replace() 方法替换当前的 URL，同样也不会导致页面重定向。

下面是 location.replace() 方法的示例代码：

location.replace('/new-url');

注意事项

使用以上两种方法修改 URL 时，需要注意以下几点：

1. 修改 URL 后，仍然需要服务器端的支持来处理该 URL。

2. 使用 pushState() 或 replaceState() 方法修改 URL 后，仅仅是修改了浏览器的历史纪录，需要结合 popstate 事件来处理 URL 的变化。

3. 如果在使用 pushState() 或 replaceState() 方法时，给出的 URL 和当前 URL 不是同一个域，将会抛出安全异常。

总结

JavaScript 提供了非常方便的方式来修改当前页面的 URL，可以根据实际需求选择使用 pushState()、replaceState() 或 location.replace() 方法。但需要注意，我们必须了解这些方法修改 URL 的本质，并且需要结合服务器端的逻辑来处理 URL 的变化。