不刷新页面修改 URL 的最佳方法是什么？

如何在不刷新页面下修改 URL？

导言

在某些情况下，我们需要修改当前网页的 URL，但又不想重新加载页面。这可能发生在多种场景中，例如，你想在不刷新页面的情况下访问 URL 中哈希之前的部分，或者你只想更改域名之后的 URL 部分。

解决方案：history.pushState()

为了修改 URL 而无需刷新页面，我们可以使用 history.pushState() 方法。此方法允许我们将一个新的状态推入浏览器历史记录堆栈，从而更改 URL。与 window.location.href 不同，history.pushState() 不会触发页面重新加载。

代码示例

// 获取当前 URL
let currentUrl = window.location.href;

// 从 URL 中删除哈希部分
let newUrl = currentUrl.split("#")[0];

// 使用 history.pushState() 更改 URL
history.pushState(null, null, newUrl);

注意事项

使用 history.pushState() 时需要注意以下几点：

• 只能更改与当前页面同源的 URL。
• null 参数表示不创建新的历史记录条目，因此不会创建前进和后退按钮。
• 除了修改 URL 之外，你还需要更新页面的标题和 meta 标签，以反映新的 URL。

其他方法

除了 history.pushState() 之外，还有其他方法可以修改 URL，但可能会导致页面重新加载：

• window.location.replace() ：替换当前历史记录条目，并使用新 URL 重新加载页面。
• window.location.assign() ：将当前页面替换为具有新 URL 的新页面。

总结

通过使用 history.pushState() 方法，我们可以修改 URL 而无需重新加载页面，从而实现无缝的导航体验。

常见问题解答

1. 什么是 history.pushState()？

history.pushState() 是一个 JavaScript 方法，允许我们在不刷新页面的情况下更改 URL。

2. 如何使用 history.pushState()？

使用 history.pushState() 需传递三个参数：第一个参数是状态对象（通常为 null），第二个参数是标题（也通常为 null），第三个参数是新的 URL。

3. history.pushState() 有哪些注意事项？

使用 history.pushState() 时，只能更改与当前页面同源的 URL，并且需要更新页面的标题和 meta 标签，以反映新的 URL。

4. history.pushState() 与其他修改 URL 方法有何不同？

history.pushState() 与 window.location.replace() 和 window.location.assign() 的不同之处在于它不会触发页面重新加载。

5. 为什么需要修改 URL 而无需刷新页面？

在某些情况下，我们需要修改 URL 而无需刷新页面，例如，你想在不刷新页面的情况下访问 URL 中哈希之前的部分，或者你只想更改域名之后的 URL 部分。