简介
在前端开发中，有时需要通过 JavaScript 改变当前页面的 URL。例如，在实现单页应用程序 (SPA) 时，我们可能需要根据不同的路由显示不同的页面内容。本文将介绍如何使用 JavaScript 来改变当前页面的 URL。
方法
1. 使用 location 对象
在 JavaScript 中，可以使用 location 对象来获取和改变当前页面的 URL。该对象包含了当前页面的 URL 相关信息，包括主机名、路径、查询参数和哈希值等等。以下是一些常见的方法：
- 获取当前页面的 URL：
location.href - 获取当前页面的协议：
location.protocol - 获取当前页面的主机名：
location.hostname - 获取当前页面的路径：
location.pathname - 获取当前页面的查询参数：
location.search - 获取当前页面的哈希值：
location.hash
为了改变当前页面的 URL，我们可以直接修改 location 对象的属性。例如，以下代码会将当前页面的 URL 改为 https://example.com/pathname?query=string#hash：
location.href = 'https://example.com/pathname?query=string#hash';
2. 使用 history 对象
除了 location 对象之外，还可以使用 history 对象来改变当前页面的 URL。history 对象提供了一些方法，可以在浏览器历史记录中添加、替换或删除条目。以下是一些常见的方法：
- 在浏览器历史记录中添加一个新条目：
history.pushState(state, title, url) - 在浏览器历史记录中替换当前条目：
history.replaceState(state, title, url) - 后退到上一个历史记录条目：
history.back() - 前进到下一个历史记录条目：
history.forward()
其中，pushState() 方法可以用来添加一个新的历史记录条目并改变当前页面的 URL。该方法接受三个参数：
state：一个 JavaScript 对象，表示新条目的状态信息。title：一个字符串，表示新条目的标题。在大多数情况下，这个参数被忽略。url：一个字符串，表示新条目的 URL。
以下是一个使用 pushState() 方法的示例：
const state = { page: 'about' };
const title = 'About us';
const url = '/about';
history.pushState(state, title, url);以上代码会将当前页面的 URL 改为 /about，并添加一个新的历史记录条目，其状态信息为 { page: 'about' }，标题为 'About us'。
注意事项
改变当前页面的 URL 可能会对用户产生一些影响，因此我们需要注意以下几点：
改变 URL 后，用户可能会返回到原始 URL 或者通过其他方式访问原始 URL。因此，我们需要确保新的 URL 能够正确地显示相应的内容，或者在不能正确显示时提供相应的提示。
如果使用
pushState()或者replaceState()方法来改变 URL，浏览器地址栏中的 URL 不会立即更新。如果需要更新地址栏中的 URL，可以使用location.replace()方法。在某些情况下，浏览器可能会阻止对 URL 的修改，例如在使用 HTTPS 时。因此，在尝试修改 URL 时，我们需要注意可能出现的异常情况，并及时进行处理。
总结
本文介绍了如何使用 JavaScript 改变当前页面的 URL。我们可以通过 location 对象直接修改 URL，也可以通过 history 对象添加新的历史记录条目来改变 URL。但是，在实际开发过程中，我们需要注意一些细节和注意事项，以确保 URL 修改的正确性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29221