Vue 3 中路由离开时取消未完成提交的核心是用 AbortController 配合 onBeforeRouteLeave 主动终止请求；需在 setup 中创建 controller、请求传 signal、离开时 abort，并处理 AbortError；建议结合 loading 状态、按钮禁用、重复提交拦截及服务端幂等校验。

路由离开时取消未完成的数据提交，核心是“在组件卸载或导航前主动终止正在运行的请求”，避免响应返回后更新已销毁组件的状态，或干扰新页面逻辑。Vue 3 中推荐使用 AbortController 配合路由守卫或组件生命周期钩子，比旧版 CancelToken 更现代、原生、可组合。

用 AbortController + onBeforeRouteLeave 统一拦截

这是最推荐的方式：在组件内创建控制器，在路由离开前调用 abort()，所有带 signal 的请求会立即中止。

• 在 setup() 或 onMounted() 中初始化：const controller = new AbortController()
• 发起请求时传入 signal：axios.post('/api/submit', data, { signal: controller.signal })
• 使用 onBeforeRouteLeave 监听离开动作（需在 <script setup> 中）：
  onBeforeRouteLeave(() => { controller.abort() })
• 错误处理时检查 error.name === 'AbortError'，不触发 UI 提示或状态更新

针对表单提交场景的增强写法

如果提交的是大文件或长耗时操作，用户可能中途放弃，建议结合 loading 状态和显式取消控制：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 提交时生成新 controller，并保存引用（避免多次提交覆盖）
• 绑定按钮的 @click 触发 submit，并在点击时先 abort 上一次（如有）
• 离开前再次 abort，双重保障：
  onBeforeRouteLeave(() => { controller?.abort(); })
• 提交成功或失败后，重置 controller 引用，防止重复 abort 报错

全局拦截器自动注入 signal（适合中大型项目）

若多个页面都需要该能力，可在 axios 请求拦截器中统一注入 signal，并将 controller 存入当前组件作用域（例如通过 provide/inject 或 store）：

立即学习“前端免费学习笔记（深入）”；

• 拦截器中：config.signal = currentController?.signal
• 每个页面组件 setup 时调用 useRequestController()（自定义 Hook），内部创建并暴露 controller
• Hook 内部自动注册 onBeforeRouteLeave 和 onUnmounted 清理逻辑
• 这样业务组件无需手动管理 signal，只需调用 Hook 即可获得自动取消能力

注意竞态与重复提交的叠加问题

单纯取消离开时的请求还不够——如果用户快速多次点击“提交”按钮，可能并发发出多个请求。这时应额外加一层控制：

• 提交按钮设为 :disabled="loading"，禁用期间阻止重复点击
• 每次新提交前，先 abort 当前 controller，再新建一个
• 服务端配合做幂等性校验（如提交带唯一 request-id），避免取消不彻底导致脏数据