路由守卫如何防止用户连点导致的跳转重复：前端防抖策略实战

路由守卫无法防止连点跳转，因其在导航发起后才执行；防连点必须前置，在调用 router.push 前用防抖（如 setTimeout + 标记位）抑制重复调用，并需处理跳转失败的兜底逻辑。

路由守卫本身不处理点击频率问题，它只响应导航行为；真正防止连点跳转重复，得靠在触发导航前做防抖控制——也就是在 用户点击按钮、调用 router.push/router.replace 的那一刻 拦住过快的连续调用。

为什么路由守卫拦不住连点？

Vue Router 的守卫（如 beforeEach、beforeRouteLeave）是在导航已经发起之后才执行的。如果用户 100ms 内点了 3 次“提交”，就会产生 3 个独立导航请求，守卫会依次处理这 3 次，无法取消前两次——它不是拦截器，而是中间件。

所以防连点必须前置：在用户点击时就抑制多余调用，不让多余的 router.push 执行。

推荐方案：封装带防抖的 router 跳转函数

不直接调用 router.push，改用一个可控的跳转函数，内部集成防抖逻辑：

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

• 使用 setTimeout + 标记位（如 isNavigating）是最轻量、兼容性最好的方式
• 避免用 Lodash 的 debounce，因为它会延迟执行，可能违背“点击即响应”的体验预期；我们真正要的是“忽略后续点击”，而非“等停顿后再跳”
• 示例（Vue 3 + Composition API）：

const router = useRouter();let pendingJump = null;const safePush = (to, options = {}) => {  if (pendingJump) {    clearTimeout(pendingJump);  }  pendingJump = setTimeout(() => {    router.push(to).catch(err => {      if (err.name !== 'NavigationFailure') console.error(err);    });    pendingJump = null;  }, 100); // 100ms 内的重复调用被取消};

在按钮 @click 中调用 safePush('/detail') 即可。

进阶：全局指令 + 状态锁定（适合中大型项目）

如果多个页面都有“跳转按钮”，可以封装成自定义指令，自动绑定防重复逻辑：

• 指令监听 click，触发前检查当前是否已有未完成导航（可用 router.currentRoute.value.matched.length 辅助判断，但更可靠的是维护一个 isTransitioning 响应式状态）
• 配合路由守卫更新状态：
  router.beforeEach(() => { isTransitioning.value = true });
router.afterEach(() => { isTransitioning.value = false });
• 指令内：v-safe-nav="{ path: '/user' }"，点击时先判断 !isTransitioning.value 再跳转

补充提醒：别忘了错误场景的兜底

即使加了防抖，仍需处理跳转失败后状态残留问题：

• router.push 可能因路由不存在、守卫 next(false)、异步守卫 reject 等原因失败
• 建议在 .catch 中重置防抖状态或提示用户，避免按钮“变灰后永远无法再点”
• 对敏感操作（如支付跳转），还可叠加二次确认弹窗，从交互层进一步降低误触概率