在 JavaScript 中，页面跳转有多种方式，每种方式的行为和效果有所不同。下面是常见的几种跳转方法以及它们之间的区别：

1. window.location.href

• 描述：
  1. window.location.href

  复制代码
  是浏览器地址栏的 URL，使用它可以加载一个新的 URL，类似于点击一个超链接。
  
• 特点：这种跳转会在浏览器历史记录中创建一条新记录，因此用户可以通过浏览器的后退按钮返回到原页面。
  
• 用法：
  1. window.location.href = "https://www.example.com";

  复制代码
• 用途：常用于页面跳转和导航。
  

2. window.location.assign()

• 描述：
  1. window.location.assign()

  复制代码
  方法也会加载新的页面，并在历史记录中添加一条记录，行为与
  1. window.location.href

  复制代码
  相似。
  
• 特点：它与
  1. window.location.href

  复制代码
  的区别不大，都是将用户导航到新的 URL，但
  1. assign

  复制代码
  是一个方法，
  1. href

  复制代码
  是一个属性。
  
• 用法：
  1. window.location.assign("https://www.example.com");

  复制代码
• 用途：与
  1. window.location.href

  复制代码
  一样，常用于导航和跳转。
  

3. window.location.replace()

• 描述：
  1. window.location.replace()

  复制代码
  用于跳转到一个新的页面，但不会在历史记录中添加新记录。也就是说，用户不能通过浏览器的后退按钮返回到原页面。
  
• 特点：这种跳转会替代当前页面，常用于希望用户不能回到当前页面的情况。
  
• 用法：
  1. window.location.replace("https://www.example.com");

  复制代码
• 用途：常用于登录后跳转，避免用户返回到登录页面。
  

4. window.location.reload()

• 描述：
  1. window.location.reload()

  复制代码
  方法用于重新加载当前页面。
  
• 特点：此方法会重新加载当前页面，可以选择是否强制从服务器重新加载页面（不使用缓存）。
  
• 用法：
  1. window.location.reload(); // 刷新当前页面
     
  2. window.location.reload(true); // 强制从服务器加载

  复制代码
• 用途：用于刷新当前页面。
  

5. window.location.hash

• 描述：通过修改 URL 中的哈希值（
  1. #

  复制代码
  后面的部分），可以在不重新加载页面的情况下更新页面状态。这种方式不会触发页面的跳转，但会更改 URL。
  
• 特点：哈希值跳转不涉及页面加载，通常用于单页应用（SPA）中的页面状态管理，能够实现页面跳转或内容的切换。
  
• 用法：
  1. window.location.hash = "#section2";  // 更新哈希值

  复制代码
• 用途：适用于单页应用的状态管理和页面内导航。
  

6. window.open()

• 描述：
  1. window.open()

  复制代码
  方法可以打开一个新的浏览器窗口或标签页，并加载指定的 URL。
  
• 特点：这种方法可以打开新窗口或标签页，跳转到指定的页面。它不会影响当前页面的历史记录。
  
• 用法：
  1. window.open("https://www.example.com", "_blank");  // 在新标签页打开

  复制代码
• 用途：适用于打开新窗口、弹出层或者新的浏览器标签。
  

7. document.location

• 描述：
  1. document.location

  复制代码
  也与
  1. window.location

  复制代码
  类似，它表示当前文档的 URL。使用它可以触发页面跳转。
  
• 特点：
  1. document.location

  复制代码
  是
  1. window.location

  复制代码
  的简写形式，作用相同。
  
• 用法：
  1. document.location = "https://www.example.com";

  复制代码
• 用途：可以用来导航到新页面，和
  1. window.location.href

  复制代码
  用法一样。
  

区别总结：

方法历史记录新标签页/窗口特点

1. window.location.href

复制代码

有否标准跳转，创建历史记录

1. window.location.assign()

复制代码

有否与

1. href

复制代码

类似，创建历史记录

1. window.location.replace()

复制代码

无否跳转后不能返回到当前页面

1. window.location.reload()

复制代码

无否刷新当前页面

1. window.location.hash

复制代码

有否改变哈希值，常用于单页应用的状态管理

1. window.open()

复制代码

无有在新标签页/窗口打开页面

1. document.location

复制代码

有否

1. window.location

复制代码

的简写
适用场景：

• 常规页面跳转：
  1. window.location.href

  复制代码
  或
  1. window.location.assign()

  复制代码
  。
  
• 替换当前页面（不允许用户返回）：
  1. window.location.replace()

  复制代码
  。
  
• 刷新页面：
  1. window.location.reload()

  复制代码
  。
  
• 单页应用中的页面内跳转：
  1. window.location.hash

  复制代码
  。
  
• 打开新窗口或标签：
  1. window.open()

  复制代码
  。
  

这些方法的选择应根据你的需求来决定，是否希望保留历史记录，是否需要打开新窗口，或是否需要刷新页面等。

总结

到此这篇关于前端JavaScript跳转页面的几种方法以及区别的文章就介绍到这了,更多相关前端跳转页面方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/3400431ra.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！