uni-app h5环境通过uni.navigateTo跳转到下一路由后再刷新页面，uni.navigateBack无法返回

uni-app h5环境通过uni.navigateTo跳转到下一路由后再刷新页面，uni.navigateBack无法返回

示例代码：

A页面
uni.navigateTo

B页面
uni.navigateBack({
delta: 1
})


## 操作步骤：
- 

## 预期结果：
- 

## 实际结果：
- 

## bug描述：

页面A  
uni.navigateTo() 跳转到页面B  

页面B  
刷新当前页面，然后通过uni.navigateBack返回页面A，返回不了，每次调用直接是刷新，通过浏览器自带的返回上级页面正常跳转。  

A -> B(手动刷新当前页) -> uni.navigateBack -> 页面刷新 -> 停留在页面B  
A -> B(不手动刷新页面) -> uni.navigateBack -> A
项目名称 值
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 win10
浏览器平台 Chrome
浏览器版本 96.0.4664.45
项目创建方式 CLI
CLI版本号 3.0.0-alpha-3030220211217005

更多关于uni-app h5环境通过uni.navigateTo跳转到下一路由后再刷新页面，uni.navigateBack无法返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。文档Tips有说明

更多关于uni-app h5环境通过uni.navigateTo跳转到下一路由后再刷新页面，uni.navigateBack无法返回的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在框架内，可以兼容下吗？如果是这样的话，那h5就得条件编译去调用了，返回上级页面业务越多的情况，条件编译的代码就会越多。

在H5环境下，uni.navigateBack 返回失败通常是由于页面刷新导致的路由栈丢失。

原因分析：

  • uni.navigateTo 在H5中通过 history.pushState 添加历史记录，路由栈由框架管理。
  • 手动刷新页面后，浏览器重新加载，Vue实例和路由栈被重置，uni.navigateBack 无法获取之前的页面记录。
  • 此时调用 uni.navigateBack 会尝试退回历史记录中的上一个条目，但当前页面的历史记录可能已不完整，导致刷新而非返回。

解决方案：

  1. 避免刷新后依赖路由返回：
    刷新后建议使用 uni.navigateTo 重新跳转，或通过 uni.reLaunch 重置应用状态。
  2. 监听页面刷新事件：
    在 onLoad 或 onShow 中判断页面是否为刷新进入，可通过 window.performance.navigation.type 检测。
    if (window.performance && performance.navigation.type === 1) {
  // 页面为刷新进入，重置路由逻辑
}
  3. 使用条件返回逻辑：
    在调用 uni.navigateBack 前，检查当前页面历史记录长度：
    if (window.history.length > 1) {
  uni.navigateBack({ delta: 1 });
} else {
  uni.navigateTo({ url: '/pages/A/A' }); // 或 uni.reLaunch
}
回到顶部