JavaScript：如何修改URL而不重新加载页面？

欢迎大家来到IT世界,在知识的湖畔探索吧!

History API

HTML5 History API无疑是现代网站的发展方向，因为它完成了手头的任务，同时还提供了额外的功能。您可以根据需求使用history.pushState()或history.replaceState()在浏览器中修改URL：

// 当前 URL: https://my-website.com/page_a // 修改后的URL const nextURL = 'https://my-website.com/page_b'; const nextTitle = 'My new page title'; const nextState = { additionalInformation: 'Updated the URL with JS' }; // 这将在浏览器的历史记录中创建一个新条目，而无需重新加载 window.history.pushState(nextState, nextTitle, nextURL); // 这将替换浏览器历史记录中的当前条目，而无需重新加载 window.history.replaceState(nextState, nextTitle, nextURL);

欢迎大家来到IT世界,在知识的湖畔探索吧!

两个方法的参数相同，允许您传递自定义的可序列化状态对象作为第一个参数、自定义标题（尽管大多数浏览器会忽略此参数）以及要在浏览器历史记录中添加/替换的URL。请记住，History API只允许相同的源URL，因此您无法导航到完全不同的网站。

Location API

旧的Location API不是该作业的最佳方案，因为它会重新加载页面，但是它仍然允许您修改当前URL，并且在使用旧浏览器时可能会很有用。您可以使用window.location.href、location.assign()或location.replace()修改URL：

欢迎大家来到IT世界,在知识的湖畔探索吧!// 当前 URL: https://my-website.com/page_a // 修改后的URL 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，但使用不同的源URL，这可能会导致安全问题。