JavaScript 在不重新加载页面的情况下修改 URL

在 Web 开发中，我们有时需要通过 JavaScript 修改 URL，而不需要重新加载整个页面。这在单页应用（SPA）开发中尤为常见。本文将介绍一些常见的 JavaScript 技术，用于在不重新加载页面的情况下修改 URL。

window.location

JavaScript 中，可以直接通过 window.location 对象来修改当前页面的 URL。例如，通过以下代码可以将当前页面的 URL 修改为 https://www.example.com/newpage：

window.location.href = 'https://www.example.com/newpage';

这样会在浏览器的历史记录中新增一条记录。

如果只需要修改页面的 hash 部分，可以通过 window.location.hash 属性来实现。例如，通过以下代码可以将当前页面的 hash 修改为 #section2：

window.location.hash = '#section2';

注意：修改 URL 的操作将会触发浏览器的跳转，这可能会导致页面重新加载，因此需要特别小心。

history.pushState 和 history.replaceState

为了不触发页面的重新加载，我们可以使用 history.pushState 和 history.replaceState 方法来修改 URL。

这两个方法都有三个参数：

• state：一个可以存储任何数据类型的对象，用于描述当前页面状态。
• title：一个字符串，表示修改后的页面标题。
• url：一个字符串，表示修改后的 URL。

这两个方法的区别在于，pushState 会将修改后的 URL 添加到浏览器的历史记录中，而 replaceState 则会替换当前页面的历史记录。

例如，通过以下代码可以使用 pushState 方法修改当前页面的 URL：

history.pushState({page: 'newpage'}, 'New Page', '/newpage');

这样会将浏览器的 URL 修改为 /newpage，但不会重新加载整个页面。并且，可以通过 state 参数来存储一些数据，以便在之后的操作中使用。

需要注意的是，修改 URL 并不会使浏览器请求新的页面，因此如果直接访问修改后的 URL，将会收到 404 错误。如果需要处理这种情况，则需要在服务器端进行相应的配置。

popstate 事件

使用 pushState 和 replaceState 方法修改 URL 后，浏览器的 URL 地址栏会显示最新的 URL，但是页面并不会自动刷新。如果用户使用浏览器的前进或后退按钮，或通过 history.back() 和 history.forward() 方法进行页面切换，页面也不会重新加载，而是会触发一个 popstate 事件。

可以通过以下代码来监听 popstate 事件：

window.addEventListener('popstate', function(event) {
  console.log('popstate event:', event.state);
});

在 popstate 事件中，可以通过 event.state 属性获取之前存储的数据。如果没有使用 pushState 和 replaceState 存储数据，则 event.state 值为 null。

结语

本文介绍了 JavaScript 中用于在不重新加载页面的情况下修改 URL 的三种方法：window.location、history.pushState 和 history.replaceState，以及如何监听 popstate 事件。在实际开发中，可以根据具体情况选择适合的方法来修改 URL。