在 JavaScript 中，页面跳转有多种方式，每种方式的行为和效果有所不同。下面是常见的几种跳转方法以及它们之间的区别：
1. window.location.href
-
描述：
window.location.href是浏览器地址栏的 URL，使用它可以加载一个新的 URL，类似于点击一个超链接。 -
特点：这种跳转会在浏览器历史记录中创建一条新记录，因此用户可以通过浏览器的后退按钮返回到原页面。
-
用法：
window.location.href = "https://www.example.com"; -
用途：常用于页面跳转和导航。
2. window.location.assign()
-
描述：
window.location.assign()方法也会加载新的页面，并在历史记录中添加一条记录，行为与window.location.href相似。 -
特点：它与
window.location.href的区别不大，都是将用户导航到新的 URL，但assign是一个方法，href是一个属性。 -
用法：
window.location.assign("https://www.example.com"); -
用途：与
window.location.href一样，常用于导航和跳转。
3. window.location.replace()
-
描述：
window.location.replace()用于跳转到一个新的页面，但不会在历史记录中添加新记录。也就是说，用户不能通过浏览器的后退按钮返回到原页面。 -
特点：这种跳转会替代当前页面，常用于希望用户不能回到当前页面的情况。
-
用法：
window.location.replace("https://www.example.com"); -
用途：常用于登录后跳转，避免用户返回到登录页面。
4. window.location.reload()
-
描述：
window.location.reload()方法用于重新加载当前页面。 -
特点：此方法会重新加载当前页面，可以选择是否强制从服务器重新加载页面（不使用缓存）。
-
用法：
window.location.reload(); // 刷新当前页面 window.location.reload(true); // 强制从服务器加载 -
用途：用于刷新当前页面。
5. window.location.hash
-
描述：通过修改 URL 中的哈希值（
#后面的部分），可以在不重新加载页面的情况下更新页面状态。这种方式不会触发页面的跳转，但会更改 URL。 -
特点：哈希值跳转不涉及页面加载，通常用于单页应用（SPA）中的页面状态管理，能够实现页面跳转或内容的切换。
-
用法：
window.location.hash = "#section2"; // 更新哈希值 -
用途：适用于单页应用的状态管理和页面内导航。
6. window.open()
-
描述：
window.open()方法可以打开一个新的浏览器窗口或标签页，并加载指定的 URL。 -
特点：这种方法可以打开新窗口或标签页，跳转到指定的页面。它不会影响当前页面的历史记录。
-
用法：
window.open("https://www.example.com", "_blank"); // 在新标签页打开 -
用途：适用于打开新窗口、弹出层或者新的浏览器标签。
7. document.location
-
描述：
document.location也与window.location类似，它表示当前文档的 URL。使用它可以触发页面跳转。 -
特点：
document.location是window.location的简写形式，作用相同。 -
用法：
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()。
这些方法的选择应根据你的需求来决定，是否希望保留历史记录，是否需要打开新窗口，或是否需要刷新页面等。