如何使用JavaScript在不重新加载页面的情况下修改URL？

在Web开发中，一个非常常见的任务是在不重新加载页面的情况下修改当前页面的URL。当您希望更新URL以反映应用程序的当前状态，而不引起完整页面重新加载时，这将非常有用。在本文中，我们将探讨JavaScript为此任务提供的不同选项以及各自的优缺点。

使用History API

HTML5的History API绝对是现代网站的首选。它可以完成手头的任务，同时还提供了其他功能。您可以使用history.pushState()或history.replaceState()来修改浏览器中的URL，具体取决于您的需求：

// 当前URL: https://my-website.com/page_a
const nextURL = 'https://my-website.com/page_b';
const nextTitle = '我的新页面标题';
const nextState = { additionalInformation: '使用JS更新了URL' };

// 这将在浏览器的历史记录中创建一个新条目，而不重新加载页面
window.history.pushState(nextState, nextTitle, nextURL);

// 这将替换浏览器历史记录中的当前条目，而不重新加载页面
window.history.replaceState(nextState, nextTitle, nextURL);

这两种方法的参数相同，允许您将自定义的可序列化state对象作为第一个参数传递，自定义title（尽管大多数浏览器将忽略此参数），以及您想要添加/替换的URL。请注意，History API仅允许同源URL，因此您无法导航到完全不同的网站。

使用Location API

较旧的Location API并不是最佳工具。它重新加载页面，但仍然允许您修改当前URL，并在使用旧版浏览器时可能会有用。您可以使用Window.location.href、location.assign()或location.replace()来修改URL：

// 当前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，如果不小心使用，可能会导致安全问题。