从A页面进入B页面，在B页面刷新，再使用浏览器上的返回按钮，返回此时不执行onUnload

从A页面进入B页面，在B页面刷新，再使用浏览器上的返回按钮，返回此时不执行onUnload

示例代码：

destroyed() {
    console.log('页面销毁')
},
onHide(){
    console.log('页面隐藏了')
},  
onUnload(){
    console.log('页面隐藏了--2')
},
onPullDownRefresh() {

},
onShow(){
    console.log('页面显示---222222222')
}

操作步骤：

使用uni.navigato跳转到B页面，在B页面刷新，然后点击浏览器返回按钮

预期结果：

B页面应该执行onUnload

实际结果：

B页面执行onShow

bug描述：

从A页面进入B页面，在B页面刷新，再使用浏览器上的返回按钮，返回此时不执行onUnload,反而执行拉onShow

同时页面上显示的也是压缩后的代码，我这是直接运行到浏览器的，未发布的版本

Image

开发环境 版本号 项目创建方式
Windows 22H2 HBuilderX

2 回复

跟踪代码 是这个监听执行到的


这是一个典型的页面生命周期管理问题。在uni-app中，当通过浏览器刷新后，页面栈会被重置，导致返回按钮行为异常。

关键点分析：

  1. 刷新后，B页面成为浏览器历史中的唯一记录
  2. 点击返回实际上是关闭当前页，而不是触发页面卸载
  3. 这种情况下uni-app的页面栈与浏览器历史不同步

解决方案：

  1. 监听返回按钮事件：
onBackPress() {
    console.log('拦截返回按钮');
    // 可以在这里处理自定义逻辑
    return false; // 不阻止默认行为
}
  1. 使用beforeDestroy替代onUnload：
beforeDestroy() {
    console.log('组件销毁前');
}
  1. 对于H5环境，可以监听页面可见性变化：
onLoad() {
    document.addEventListener('visibilitychange', this.handleVisibilityChange);
},
methods: {
    handleVisibilityChange() {
        if(document.hidden) {
            console.log('页面隐藏');
        }
    }
}
回到顶部