Javascript 修改 URL 无需重新加载 - Javascript

在前端开发中，我们经常需要在不刷新页面的情况下修改 URL。这可以让我们实现很多有趣的交互效果，比如实现单页应用。

本文将介绍几种在 Javascript 中修改 URL 的方法，无需重新加载页面。

1. 使用 history.pushState()

history.pushState() 方法可以新增一个历史记录条目，并修改当前 URL。该方法接收三个参数：

• state：一个表示新状态的对象，可以在 popstate 事件中获取到。
• title：该参数现在被忽略，可以传递一个空字符串。
• url：新的 URL 规范（不包括域名）。

以下是一个示例，将当前 URL 修改为 /example：

history.pushState(null, '', '/example');

如果你需要在用户点击“后退”按钮时返回上一个 URL，你需要绑定 popstate 事件：

window.addEventListener('popstate', function(event) {
  console.log('Back button clicked.');
});

2. 使用 history.replaceState()

history.replaceState() 方法可以修改当前历史记录条目，并修改当前 URL。该方法接收三个参数：

• state：一个表示新状态的对象，可以在 popstate 事件中获取到。
• title：该参数现在被忽略，可以传递一个空字符串。
• url：新的 URL 规范（不包括域名）。

以下是一个示例，将当前 URL 修改为 /example：

history.replaceState(null, '', '/example');

如果你只是想修改当前的 URL，而不希望在历史记录中添加一个新条目，可以使用该方法。

3. 使用 location.hash

location.hash 可以用于在当前 URL 中添加一个片段标识符，不会刷新页面。例如，通过以下代码将当前 URL 修改为 example.com#anchor：

location.hash = '#anchor';

可以通过 window.onhashchange 事件监听 hash 值的变化：

window.addEventListener('hashchange', function(event) {
  console.log('Hash changed to ' + location.hash);
});

结论

本文介绍了在 Javascript 中修改 URL 的几种方法：使用 history.pushState()、history.replaceState() 和 location.hash。这些方法可以让我们在不刷新页面的情况下修改 URL，实现更流畅的用户体验。