碎片时间学编程「27]：如何在不重新加载页面的情况下使用 JavaScript 修改 URL？

API 使用历史

HTML5 History API 绝对是现代网站的必经之路。它完成了手头的任务，同时还提供了额外的功能。我们可以使用history.pushState()或history.replaceState()修改浏览器中的 URL，具体取决于我们的需要：

// Current URL: https://my-website.com/page_a

const nextURL = 'https://my-website.com/page_b';

const nextTitle = 'My new page title';

const nextState = { additionalInformation: 'Updated the URL with JS' };

// This will create a new entry in the browser's history, without reloading

window.history.pushState(nextState, nextTitle, nextURL);

// This will replace the current entry in the browser's history, without reloading

window.history.replaceState(nextState, nextTitle, nextURL);

两种方法的参数是相同的，允许我们传递一个自定义的可序列化state对象作为第一个参数，一个自定义的title（尽管大多数浏览器会忽略这个参数）和URL我们想在浏览器的历史记录中添加/替换的。请记住，History API 仅允许同源 URL，因此我们无法导航到完全不同的网站。

使用位置 API

较旧的 Location API 并不是完成这项工作的最佳工具。它会重新加载页面，但仍允许我们修改当前 URL，并且在使用旧版浏览器时可能很有用。我们可以使用 location.assign() 或 location.replace() 修改Window.location.hrefURL ：

// 当前URL: https://my-website.com/page_a

const nextURL = 'https://my-website.com/page_b';

// 这将在浏览器的历史记录中创建一个新条目，然后重新加载

window.location.href = nextURL;

// 这将替换浏览器历史记录中的当前条目，然后重新加载

window.location.assign(nextURL);

// 这将替换浏览器历史记录中的当前条目，然后重新加载

window.location.replace(nextURL);

如我们所见，所有三个选项都会导致页面重新加载，这可能是不可取的。与 History API 不同，我们只能设置 URL，没有任何附加参数。最后，Location API 不会限制我们使用同源 URL，如果我们不小心，可能会导致安全问题。