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></script>中）：onBeforeRouteLeave(() => { controller.abort() }) - 错误处理时检查
error.name === 'AbortError'，不触发 UI 提示或状态更新
针对表单提交场景的增强写法
如果提交的是大文件或长耗时操作，用户可能中途放弃，建议结合 loading 状态和显式取消控制：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 提交时生成新 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），避免取消不彻底导致脏数据
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
