Vue2中路由跳转时如何在组件beforeDestroy钩子移除手动添加的事件监听器

云原生阿岚

2026-10-7

问题根因

Vue路由默认的组件切换逻辑为先挂载新组件，再销毁旧组件，你观察到的生命周期触发顺序是框架默认行为，并非代码错误。默认逻辑下旧组件的beforeDestroy必然晚于新组件的created触发，所以你在beforeDestroy里移除监听器的时机晚于新组件创建的时机，无法满足需求。

可行解决方案

方案1：使用beforeRouteLeave路由守卫提前移除监听器
该钩子在当前路由准备切换、新组件生命周期启动前就会触发，是处理这类清理操作的最优选择。调整代码如下：

// 保存事件回调到实例属性，避免移除时误伤同事件的其他监听器
created() {
  this.customEventHandler = payload => {
    // 原有业务代码
  }
  this.EventBus.$on('myCustomEvent', this.customEventHandler)
},
// 路由离开时直接清理
beforeRouteLeave(to, from, next) {
  this.EventBus.$off('myCustomEvent', this.customEventHandler)
  next()
},
// 保留beforeDestroy里的清理逻辑作为兜底，避免非路由跳转场景下的监听器泄漏
beforeDestroy() {
  this.EventBus.$off('myCustomEvent', this.customEventHandler)
}

方案2：配置路由过渡的out-in模式，强制调整组件加载顺序
如果你需要全局/指定路由下都遵循「先销毁旧组件、再挂载新组件」的逻辑，可以给router-view外层加过渡组件，设置mode="out-in"：
```
<transition mode="out-in">
  <router-view></router-view>
</transition>
```
配置后Vue会等待旧组件完全销毁后再初始化新组件，自然会按你预期的顺序触发生命周期，原有beforeDestroy里的清理逻辑无需修改即可生效。