uniapp页面跳转方式

最新推荐文章于 2025-07-18 15:12:43 发布

误凡尘

最新推荐文章于 2025-07-18 15:12:43 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HBuilderX 文章标签： uni-app 前端

原文链接：https://www.baidu.com/s?wd=uniapp%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E6%96%B9%E5%BC%8F&rsv_spt=1&rsv_iqid=0xe07d0d79003e5b48&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_dl=ts_0&rsv_enter=0&oq=uni.navigateTo&rsv_t=6abeg44idjoZLxC4

HBuilderX 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了uni-app中四种常见的页面跳转方式：uni.navigateTo()、uni.redirectTo()、uni.switchTab()和uni.reLaunch()，分别展示了它们的功能、示例代码和使用场景。

在uni-app中有多种页面跳转的方式。以下是常用的几种方法：

使用uni.navigateTo()进行页面跳转：该方法可以打开新页面并保留当前页面，返回时会关闭新页面而不影响原来的页面。示例代码如下所示：
```
// 在当前页面调用 uni.navigateTo() 方法进行页面跳转

uni.navigateTo({

url: '/pages/otherPage' // 要跳转到的目标页面路径

});
```
使用uni.redirectTo()进行页面重定向：与uni.navigateTo()类似，也能打开新页面并保留当前页面，但返回时会直接关闭当前页面，无需再次点击返回按钮才能返回上一个页面。示例代码如下所示：
```
// 在当前页面调用 uni.redirectTo() 方法进行页面重定向

uni.redirectTo({

url: '/pages/otherPage' // 要跳转到的目标页面路径

});
```
使用uni.switchTab()切换底部导航栏选项卡：这种方式只能跳转到已经配置好的底部导航栏选项卡对应的页面，通过设置url参数为相应选项卡的路径即可。示例代码如下所示：
```
// 在当前页面调用 uni.switchTab() 方法进行底部导航栏选项卡切换

uni.switchTab({

url: '/pages/tabBarItemPage' // 要跳转到的选项卡页面路径

});
```
使用uni.reLaunch()关闭所有页面后重新打开指定页面：这种方式会先关闭所有页面，然后重新打开指定页面作为首页显示。示例代码如下所示：
```
/ 在当前页面调用 uni.reLaunch() 方法进行页面重载

uni.reLaunch({

url: '/pages/homePage' // 要跳转到的首页路径

});
```