JS页面跳转代码怎么写?总结了5种方法

JS页面跳转是在网页中实现页面间跳转的一种方法，可以通过不同的方式实现不同的效果。下面总结了5种常用的页面跳转方法，并通过案例说明和代码示例进行详细介绍。

1. 使用window.location.href

window.location.href方法是最常用的页面跳转方法之一，通过将目标页面的URL赋值给window.location.href可以实现跳转。

案例说明：

假设我们有一个按钮，当用户点击该按钮时，跳转到另一个页面example.html。

代码示例：

```

跳转到example.html

```

2. 使用window.location.replace

window.location.replace方法与window.location.href方法类似，也可以实现页面跳转的功能。不同之处在于，replace方法会替换当前页面的URL，而不会在浏览器的历史记录中生成新的记录。

案例说明：

假设我们有一个登录页面，当用户登录成功后，跳转到主页index.html。使用window.location.replace方法可以实现这一功能。

代码示例：

```

// 假设登录成功后，调用redirectToIndex函数进行跳转

function redirectToIndex() {

window.location.replace("index.html");

}

```

3. 使用location.assign

location.assign方法也可以实现页面跳转的功能。与前两种方法不同的是，assign方法是通过给location对象的assign属性赋值，指定目标页面的URL实现跳转。

案例说明：

假设我们有一个导航栏，点击不同的导航项可以跳转到不同的页面。使用location.assign方法可以方便地实现这一功能。

代码示例：

```

• 首页
• 关于我们
• 联系我们

```

4. 使用location.href和location.reload

除了将URL赋值给location.href实现跳转外，还可以通过刷新页面的方式实现跳转。使用location.reload方法可以重新加载当前页面，从而实现跳转的效果。

案例说明：

假设我们有一个表单页面，用户提交表单后，需要跳转回到列表页面，并刷新列表数据。可以通过将表单页面的URL赋值给location.href，并在列表页面的onload事件中调用location.reload方法实现跳转和刷新。

代码示例：

表单页面：form.html

```

```

列表页面：list.html

```

```

5. 使用location.replace和location.reload

类似于前面介绍的window.location.replace和location.reload方法，location.replace和location.reload方法也可以组合使用，实现页面间的跳转和刷新的效果。

案例说明：

假设我们有一个订单页面，用户成功提交订单后，跳转到订单详情页面，并刷新订单详情数据。可以先使用location.replace方法跳转到订单详情页面，然后在订单详情页面的onload事件中使用location.reload方法刷新数据。

代码示例：

订单页面：order.html

```

查看订单详情

```

订单详情页面：orderDetail.html

```

```

以上是5种常见的JS页面跳转方法的介绍，每种方法都根据不同的场景给出了相应的案例说明和代码示例。通过灵活运用这些方法，我们可以轻松实现页面间的跳转和刷新效果，提升用户体验。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/