uni-app页面返回跳转不正常
uni-app页面返回跳转不正常
# 基本信息已去除
## 操作步骤：
1. 新建一个空白uni-app的工程，添加从Home页PageA/PageB/PageC四个页面。
2. 页面中依次跳转，Home -> PageA -> PageB -> PageC
3. 此时依次返回正常
4. 修改pages.json中PageA的background为transparent，且把home页添加到tablist中。
5. 此时，返回就出现问题，从PageC返回PageB时，会马上自动返回到Page A。
6. 第4步的修改只改任意一个，不会出现问题。
## 预期结果：
如上操作时，能够正常返回。
## 实际结果：
修改pages.json中PageA的background为transparent，且把home页添加到tablist时，返回就出现问题，从PageC返回PageB时，会马上自动返回到Page A。
## bug描述：
从Home页跳转到PageA。
PageA跳转到PageB。
PageB跳转到PageC。
点PageC的返回按钮，返回到PageB。这一步会出错，返回PageB后，页面继续跳转为PageA
点PageB的返回按钮，返回到PageA。
点PageA的返回按钮，返回到Home。
===============
Android有问题，iOS正常。
| 信息类别 | 详细信息 |
|--------------|--------------------|
| 产品分类 | uniapp/App |
| PC开发环境 | Mac |
| PC开发环境版本 | Monterey 12.2.1 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.4.7 |
| 手机系统 | Android |
| 手机系统版本 | Android 11 |
| 手机厂商 | 小米 |
| 手机机型 | Redmi Note 11 Pro |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
相关链接：
- [问题141779](https://ask.dcloud.net.cn/question/141779)
3 回复
在 uni-app 开发中，页面返回跳转不正常的问题可能由多种原因引起。以下是一些常见的原因及解决方法：
1. 页面栈管理问题
uni-app 使用页面栈管理页面跳转，如果页面栈管理不当，可能会导致返回时跳转不正常。
解决方法：
- 使用
uni.navigateBack返回时，确保页面栈中有足够的页面。 - 如果需要返回指定页面，可以使用
uni.navigateBack({ delta: 2 })，其中delta表示返回的页面数。 - 如果需要跳转到指定页面而不是返回，可以使用
uni.redirectTo或uni.reLaunch。
2. 页面生命周期问题
页面生命周期（如 onLoad、onShow）中的逻辑可能导致返回时页面状态异常。
解决方法：
- 检查
onLoad和onShow中的逻辑，确保不会重复执行某些操作。 - 如果需要页面返回时刷新数据，可以在
onShow中处理。
3. 路由跳转方式问题
uni-app 提供了多种路由跳转方式（如 navigateTo、redirectTo、reLaunch、switchTab），如果使用不当，可能导致返回时跳转不正常。
解决方法：
- 如果需要保留页面栈，使用
uni.navigateTo。 - 如果需要关闭当前页面并跳转，使用
uni.redirectTo。 - 如果需要重新加载整个应用，使用
uni.reLaunch。 - 如果需要跳转到
tabBar页面，使用uni.switchTab。
4. 页面路径问题
页面路径配置错误可能导致跳转失败。
解决方法：
- 检查
pages.json中的页面路径配置，确保路径正确。 - 确保跳转时传入的路径与
pages.json中的路径一致。
5. 异步操作问题
如果页面跳转依赖于异步操作（如网络请求），可能导致跳转逻辑混乱。
解决方法：
- 确保异步操作完成后再执行跳转逻辑。
- 使用
Promise或async/await确保异步操作顺序。
6. 页面缓存问题
uni-app 默认会缓存页面，可能导致返回时页面状态未更新。
解决方法：
- 在
onUnload中清除页面状态或数据。 - 使用
uni.reLaunch或uni.redirectTo强制刷新页面。
7. 自定义导航栏问题
如果使用了自定义导航栏，可能导致返回按钮逻辑异常。
解决方法：
- 检查自定义导航栏的返回按钮逻辑，确保调用
uni.navigateBack或uni.redirectTo。
8. 调试工具问题
如果使用 HBuilderX 调试工具，可能是工具本身的问题。
解决方法：
- 尝试使用真机调试，排除工具问题。
- 更新 HBuilderX 到最新版本。
示例代码
// 正常跳转
uni.navigateTo({
url: '/pages/detail/detail'
});
// 返回上一页
uni.navigateBack();
// 返回指定页面
uni.navigateBack({
delta: 2
});
// 关闭当前页面并跳转
uni.redirectTo({
url: '/pages/index/index'
});
// 重新加载整个应用
uni.reLaunch({
url: '/pages/index/index'
});
// 跳转到 tabBar 页面
uni.switchTab({
url: '/pages/tabbar/tabbar'
});