在VueJS单页应用中如何通过Zoom Meeting SDK退出会议并关闭嵌入UI？

核心问题原因 #

Zoom Meeting SDK默认的leaveMeeting()是优雅断开流程，需要等待服务器端确认（约2分钟），且不会自动清理生成的DOM元素；SPA路由切换无页面刷新，残留的SDK DOM会一直停留在页面中。

解决方案步骤 #

1. 路由离开时组合调用退出与销毁API #

在组件的路由离开钩子（Vue2用beforeRouteLeave，Vue3用onUnmounted）中，先调用leaveMeeting()触发退出，再用ZoomMTG.destroy()强制销毁SDK实例，跳过等待流程。

2. 手动兜底清理残留DOM #

SDK的destroy()有时可能无法完全清理所有生成的DOM元素，需主动移除核心容器（如zmmtg-root）及自定义的Zoom会议容器。

代码示例 #

Vue3 组件（Composition API） #

<script setup>
import { onUnmounted } from 'vue'
import ZoomMTG from '@zoomus/websdk'

// 组件卸载时执行清理
onUnmounted(() => {
  // 触发会议退出，指定leaveUrl避免跳转异常
  ZoomMTG.leaveMeeting({ leaveUrl: 'about:blank' })
  
  // 延迟执行销毁与DOM清理，确保退出请求发送完成
  setTimeout(() => {
    // 强制销毁SDK实例，终止所有连接
    ZoomMTG.destroy()
    
    // 移除SDK生成的根容器
    const zoomRoot = document.getElementById('zmmtg-root')
    if (zoomRoot) zoomRoot.remove()
    
    // 移除自定义的会议容器（如果有）
    const meetingContainer = document.querySelector('.your-meeting-container')
    if (meetingContainer) meetingContainer.remove()
  }, 500)
})
</script>

Vue2 组件（Options API） #

export default {
  // 路由离开前执行清理
  beforeRouteLeave(to, from, next) {
    ZoomMTG.leaveMeeting({ leaveUrl: 'about:blank' })
    
    setTimeout(() => {
      ZoomMTG.destroy()
      
      const zoomRoot = document.getElementById('zmmtg-root')
      zoomRoot && zoomRoot.remove()
      
      // 允许路由跳转
      next()
    }, 500)
  }
}

注意事项 #

• leaveUrl必须指定（如about:blank），否则可能导致页面跳转异常；
• 延迟500ms是为了确保退出请求成功发送，避免直接销毁导致的请求中断；
• 如果仍有残留样式或事件监听，可额外清理Zoom相关的全局事件（如zoomMeetingStatus）。

内容的提问来源于stack exchange，提问作者Gabriel Sato