Vue2结合Vue Router 如何在组件销毁或导航离开时正确触发指定函数

诊断页路由格式：/sav/:id/diagnostic

• 版本适配错误：你使用的是Vue2技术栈，但写的unmounted、beforeUnmount是Vue3专属的生命周期钩子，在Vue2环境下根本不会被识别执行，自然没有效果。Vue2对应的组件销毁阶段钩子为beforeDestroy、destroyed。
• 缓存拦截逻辑：如果项目中用<keep-alive>包裹了<router-view>做页面缓存，就算写对了销毁钩子，路由跳走后组件也不会被回收，对应的钩子完全不会触发。
• 路由监听逻辑缺失：之前尝试通过watch侦听路由变化触发解锁未生效，本质是没有做路径判断，既可能出现无效触发，也没有精准识别“离开诊断页”的场景。

优先推荐：使用Vue Router组件内离开守卫 #

这是稳定性最高的实现方式，不受组件缓存、生命周期版本差异影响，只要离开当前诊断路由就一定会触发，完全匹配“进页面锁、跳走解锁”的业务场景：

// 直接写在Diagnostic组件的配置项中，与data、methods同层级
export default {
  methods: {
    // 原有的解锁POST请求逻辑
    async unlockObject() {
      // 接口请求代码省略
    },
    // 原有的进入页面时的锁定逻辑
    async lockObject() {
      // 接口请求代码省略
    }
  },
  // 进入当前路由时触发，每次进入（包括被keep-alive缓存后切回）都会执行锁定逻辑
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.lockObject()
    })
  },
  // 离开当前路由时触发，无任何前置依赖，只要跳出诊断页就会执行
  beforeRouteLeave(to, from, next) {
    // 等解锁请求执行完成后再放行路由跳转，避免请求被跳转动作中断
    this.unlockObject().finally(() => {
      next()
    })
  }
}

次选：适配Vue2正确的生命周期钩子 #

如果不需要用路由守卫的方式，先把你写错的Vue3钩子替换成Vue2对应的版本：

// 错误的Vue3写法（在Vue2环境下完全不生效）
// unmounted() {
//   this.unlockObject()
// }

// 正确的Vue2写法（无keep-alive缓存的场景下可以正常触发）
destroyed() {
  this.unlockObject()
}

如果项目启用了<keep-alive>缓存，需要将销毁钩子替换为缓存组件专属的生命周期：

// 组件被激活、切回当前页面时触发，适配进页面的锁定逻辑
activated() {
  this.lockObject()
},
// 组件被切走、缓存起来时触发，适配跳走时的解锁逻辑
deactivated() {
  this.unlockObject()
}

兜底：修正路由watch的触发逻辑 #

如果坚持用侦听路由的方式，需要补充精准的路径判断，避免无效触发：

watch: {
  $route(newRoute) {
    // 正则匹配诊断页路径格式，只要不匹配就说明跳出了诊断页
    const isOnDiagnosticPage = newRoute.path.match(/^\/sav\/[^/]+\/diagnostic$/)
    if (!isOnDiagnosticPage) {
      this.unlockObject()
    }
  }
}

注意：beforeRouteLeave是上述方案中可靠性最高的选项，它是Vue Router层面的路由切换拦截逻辑，不依赖组件的渲染状态，不管组件是否被缓存、是否存在路由参数匹配的特殊场景，都能保证离开路由时的解锁逻辑被正确执行。

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