如何重定向到 JavaScript 中的相对 URL？

在 Web 开发中，重定向是很常见的一种操作，用于将用户自动重定向到另一个 URL。当我们需要重定向到 JavaScript 中的相对 URL 时，该如何操作呢？

通过 window.location.href 重定向

最常见的重定向方式是通过 window.location.href 实现的。该属性表示当前页面的 URL，可以通过修改它来实现重定向。

以下是一个示例代码片段，通过点击按钮实现重定向到指定的相对 URL：

document.querySelector('#redirect-btn').addEventListener('click', function() {
  window.location.href = '/path/to/new/page.html';
});

在上述代码中，我们使用 document.querySelector 方法获取了一个按钮的 DOM 元素，并使用 addEventListener 方法给该按钮添加了一个点击事件的监听器。当按钮被点击时，就会触发监听器中的回调函数，将 window.location.href 修改为指定的相对 URL，从而实现重定向操作。

需要注意的是，在使用相对 URL 时，路径的解析方式是相对于当前页面的 URL 的。如果当前页面的 URL 为 http://www.example.com/path/to/old/page.html，那么相对 URL /path/to/new/page.html 就会解析为 http://www.example.com/path/to/new/page.html。

通过 location.replace 重定向

除了 window.location.href，还有一个常见的重定向方式是通过 location.replace 实现的。这种方式和 window.location.href 的作用类似，但是有一些细微的差别。

以下是一个示例代码片段，通过点击按钮实现重定向到指定的相对 URL：

document.querySelector('#redirect-btn').addEventListener('click', function() {
  location.replace('/path/to/new/page.html');
});

在上述代码中，我们同样使用 document.querySelector 方法获取了一个按钮的 DOM 元素，并使用 addEventListener 方法给该按钮添加了一个点击事件的监听器。当按钮被点击时，就会触发监听器中的回调函数，调用 location.replace 方法并传入指定的相对 URL，从而实现重定向操作。

需要注意的是，location.replace 和 window.location.href 的区别是，后者会在浏览器的历史记录中添加一条记录，而前者不会。因此，使用 location.replace 可以避免出现“回退”和“刷新”等问题，更适合进行重定向操作。

总结

重定向是一种常见的 Web 开发操作，而通过 JavaScript 实现重定向也是很常见的需求。本文介绍了两种常见的重定向方式，即通过 window.location.href 和 location.replace 实现，希望对读者有所帮助。