前端跳转页面的几种方法以及区别

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

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

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

2. window.location.assign()

• 描述：window.location.assign() 方法也会加载新的页面，并在历史纪录中添加一条纪录，行为与 window.location.href 相似。
  
• 特点：它与 window.location.href 的区别不大，都是将用户导航到新的 URL，但 assign 是一个方法，href 是一个属性。
  
• 用法：
  
  1. window.location.assign("https://www.example.com");

  复制代码
• 用途：与 window.location.href 一样，常用于导航和跳转。
  

3. window.location.replace()

• 描述：window.location.replace() 用于跳转到一个新的页面，但不会在历史纪录中添加新纪录。也就是说，用户不能通过欣赏器的退却按钮返回到原页面。
  
• 特点：这种跳转会替换当前页面，常用于希望用户不能回到当前页面的环境。
  
• 用法：
  
  1. window.location.replace("https://www.example.com");

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

4. window.location.reload()

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

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

5. window.location.hash

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

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

6. window.open()

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

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

7. document.location

• 描述：document.location 也与 window.location 类似，它表示当前文档的 URL。使用它可以触发页面跳转。
  
• 特点：document.location 是 window.location 的简写形式，作用相同。
  
• 用法：
  
  1. document.location = "https://www.example.com";

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

---

区别总结：

方法历史纪录新标签页/窗口特点window.location.href有否标准跳转，创建历史纪录window.location.assign()有否与 href 类似，创建历史纪录window.location.replace()无否跳转后不能返回到当前页面window.location.reload()无否刷新当前页面window.location.hash有否改变哈希值，常用于单页应用的状态管理window.open()无有在新标签页/窗口打开页面document.location有否window.location 的简写 实用场景：

• 通例页面跳转：window.location.href 或 window.location.assign()。
  
• 替换当前页面（不答应用户返回）：window.location.replace()。
  
• 刷新页面：window.location.reload()。
  
• 单页应用中的页面内跳转：window.location.hash。
  
• 打开新窗口或标签：window.open()。
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。