uni-app subnvue重复创建，无法销毁

uni-app subnvue重复创建，无法销毁

测试过的手机：

  • 华为
  • 小米

操作步骤：

a 页面navigateTo进入b页面，b 页面再navigateTo进入另一个a页面，a页面中的subnvue会重复创建，新的a页面打开subnvue会把之前的a页面的subnvue也打开，且无法关闭，如退出登录（切换账号），relaunch到登录页，之前所有的打开过的subnvue都没有关闭，新的页面再打开会把之前的subnvue页面也调出来

预期结果：

关闭页面销毁子窗体，当前页打开当前页的子窗体

实际结果：

未销毁，且会打开之前所有的子窗体

bug描述：

subnvue子窗体无法销毁，重复创建


| 信息类型         | 详细信息     |
|------------------|--------------|
| 产品分类         | uniapp/App   |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | 10           |
| HBuilderX类型    | 正式         |
| HBuilderX版本号  | 3.1.9        |
| 手机系统         | 全部         |
| 手机厂商         | 华为         |
| 页面类型         | nvue         |
| 打包方式         | 云端         |
| 项目创建方式     | HBuilderX    |

更多关于uni-app subnvue重复创建，无法销毁的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

已找到解决方案（在有subbnvue子窗体的页面生命周期函数destroyed执行subNvue.close（）方法进行销毁）

更多关于uni-app subnvue重复创建，无法销毁的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个方法没有看到文档说明呢

这是一个典型的subnvue生命周期管理问题。在uni-app中，subnvue的销毁需要手动处理，特别是在页面跳转时。

当使用navigateTo从a到b再到a时，第一个a页面并未被销毁，其subnvue实例仍然存在。新打开的a页面创建subnvue时，之前的实例也会被激活。

解决方案：

  1. 在页面onHide或onUnload中主动销毁subnvue：
onUnload() {
    // 获取subnvue实例并销毁
    const subNVue = uni.getSubNVueById('your_subnvue_id')
    if(subNVue) {
        subNVue.hide()
        // 或者完全销毁
        // subNVue.destroy()
    }
}

  1. 使用页面栈管理： 检查当前页面栈，确保在打开新页面时，之前的页面实例被正确清理。

  2. subnvue实例复用： 在页面onShow时显示需要的subnvue，onHide时隐藏，避免重复创建。

  3. 登录页relaunch处理： 在relaunch到登录页前，确保所有subnvue实例都已正确销毁：

// 退出登录时清理所有subnvue
const subNVues = uni.getSubNVuesById?.(['id1', 'id2']) // 获取所有subnvue实例
subNVues?.forEach(sub => sub.destroy?.())
uni.reLaunch({url: '/pages/login/login'})
回到顶部