JavaScript用来改变浏览器地址栏 URL 的方法

window.location.replace(), window.location.href, 和 window.location.assign() 都是 JavaScript 用来改变浏览器地址栏 URL 并跳转到新页面的方式，但它们在 历史记录 处理上有一些不同。下面是它们的区别：

1. window.location.replace()

   作用：

   • 用于加载一个新的 URL 替代当前页面。
   • 不会将当前页面添加到浏览器的历史记录中。

   何时使用：

   • 当你想要跳转到新页面，但不希望用户能够通过浏览器的“后退”按钮返回到当前页面时。
   • 比如，用户登录后，你可能不希望他们能通过点击“后退”按钮回到登录页。

   示例：

   window.location.replace("https://www.example.com");
   

   结果：

   • 用户跳转到 https://www.example.com。
   • 如果用户点击“后退”按钮，不会返回到当前页面，因为当前页面没有保留在历史记录中。

2. window.location.href

   作用：

   • 用于改变浏览器的 URL，跳转到新的页面。
   • 会将当前页面添加到浏览器的历史记录中。

   何时使用：

   • 当你希望跳转到新页面，并且用户仍然可以通过“后退”按钮返回到当前页面时。

   示例：

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

   结果：

   • 用户跳转到 https://www.example.com。
   • 如果用户点击“后退”按钮，会返回到当前页面，因为当前页面被保留在浏览器历史记录中。

3. window.location.assign()

   作用：

   • 功能和 window.location.href 类似，用于加载新的 URL。
   • 会将当前页面添加到浏览器的历史记录中，与 href 相同。

   何时使用：

   • 当你希望跳转到新页面，并且用户仍然能够通过“后退”按钮返回到当前页面时。它可以像 href 一样用来设置新的 URL。

   示例：

   window.location.assign("https://www.example.com");
   

   结果：

   • 用户跳转到 https://www.example.com。
   • 如果用户点击“后退”按钮，会返回到当前页面，因为当前页面被保留在历史记录中。

总结区别

方法	历史记录行为	使用场景
window.location.replace()	不会将当前页面添加到历史记录中	不希望用户通过“后退”按钮返回当前页面
window.location.href	会将当前页面添加到历史记录中	希望用户能够通过“后退”按钮返回当前页面
window.location.assign()	会将当前页面添加到历史记录中	希望用户能够通过“后退”按钮返回当前页面

总结：

• 如果你需要避免页面跳转后用户能回到当前页面，使用 window.location.replace()。
• 如果你希望用户能够通过“后退”按钮返回到当前页面，则使用 window.location.href 或 window.location.assign()，这两者的行为是相同的。