uni-app tabbar页面为nvue时，调用uni.reLaunch方法后onUnload代码不执行

uni-app tabbar页面为nvue时，调用uni.reLaunch方法后onUnload代码不执行

示例代码：

<template>
<view>
<button @click="clickitem()" style="margin: 20px;">reLunch后没有触发onUnLoad</button>  
</view>  
</template>  

<script>
export default {
data() {
return {}
},
onLoad() {
console.log("Nvue触发了onLoad");
},
onUnload(){
console.log("Nvue触发了onUnload");
},
onShow(){
console.log("Nvue触发onShow");
},
onHide(){
console.log("Nvue触发onHide");
},
methods: {
clickitem(){
console.log("clickitem");
uni.reLaunch({
url:'../index/index'
});
}
}
}
</script>  

<style>  
</style>

操作步骤：

启动应用后点击 nvue不触发onUnload

预期结果：

在nvue页面点reLunch后没有触发onUnLoad后应该解发onUnload方法,控制台输出相关文字“Nvue触发了onUnload”

实际结果：

没有执行onUnload方法

bug描述：

tabbar页面为nvue时，在调用uni.reLunch方法后onUnload代码不执行，只有在代码编译后导致重新加载时在奇怪的连续执行N多次。

附件为相关代码

noUnLoad.zip

相关链接 ：


更多关于uni-app tabbar页面为nvue时，调用uni.reLaunch方法后onUnload代码不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app tabbar页面为nvue时，调用uni.reLaunch方法后onUnload代码不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的nvue页面生命周期问题。在tabbar页面使用nvue时，调用uni.reLaunch确实会导致onUnload生命周期不执行。

问题分析：

  • nvue页面在tabbar场景下，页面实例的管理机制与vue页面存在差异
  • 当使用reLaunch关闭所有页面并打开新页面时，nvue页面的卸载流程未能完整触发
  • 这属于框架层面的生命周期触发机制问题

当前解决方案：

  1. 使用onHide替代：将需要在页面卸载时执行的逻辑移到onHide中
  2. 避免在tabbar页面使用reLaunch：考虑使用uni.switchTab或其他导航方式
  3. 手动清理资源：在onHide中主动释放定时器、事件监听等资源

代码调整示例：

onHide(){
  console.log("Nvue触发onHide");
  // 将onUnload中的逻辑移到这里执行
  this.cleanup(); // 自定义清理方法
}
回到顶部