window.location.replace() 方法用于加载新的 URL，并且替换当前页面的历史记录。与 window.location.href 或 window.location.assign() 不同，window.location.replace() 会将当前页面从浏览器历史记录中移除，因此无法通过浏览器的“后退”按钮返回到原页面。

基本语法

window.location.replace(url);
  • url：要加载的新页面的 URL。可以是绝对 URL 或相对 URL。

特点：

  • 替换当前历史记录：调用 replace() 后，当前页面会被新页面替换，并且新页面会成为历史记录栈中的当前项，但原页面不会保留在历史记录中。
  • 不能通过后退按钮返回：由于替换了历史记录，用户无法通过浏览器的后退按钮返回到被替换的页面。

示例：

// 替换当前页面并加载新页面
window.location.replace("https://www.example.com");

// 使用相对路径来替换当前页面
window.location.replace("/newpage.html");

使用场景：

  • 用户登录后重定向：用户登录后不希望用户通过浏览器的“后退”按钮回到登录页面，可以使用 replace()来替换当前页面。
  • 页面跳转但不希望留下历史记录：如果不希望用户在跳转后还能返回到当前页面（例如支付完成后跳转到感谢页面），可以使用 replace()。

与 window.location.href 和 window.location.assign() 的对比：

  • window.location.href = "newUrl"：会将新的 URL 添加到历史记录栈中，允许用户通过后退按钮返回到当前页面。
  • window.location.assign("newUrl")：也会将新的 URL 添加到历史记录栈中，效果与 href 类似。
  • window.location.replace("newUrl")：替换当前页面，不会在历史记录中保留当前页面。

有些场景下你可能会需要这种替换历史记录的功能，像是在单页应用（SPA）中，处理用户认证后的页面跳转。你有这样的需求吗？