路由守卫无法防止连点跳转，因其在导航发起后才执行；防连点必须前置，在调用 router.push 前用防抖（如 setTimeout + 标记位）抑制重复调用，并需处理跳转失败的兜底逻辑。
很多开发者容易陷入一个误区：试图用路由守卫来解决用户快速连点导致的重复跳转问题。但真相是，路由守卫本身并不处理点击频率，它只响应已经发起的导航行为。真正要防止连点跳转，关键在于在触发导航之前就做好控制——也就是在用户点击按钮、调用 `router.push` 或 `router.replace` 的那一刻，就拦截掉那些过快的、多余的调用。
为什么路由守卫拦不住连点？
这得从路由守卫的执行时机说起。Vue Router 的守卫（比如 `beforeEach`、`beforeRouteLea ve`）是在导航已经发起之后才被触发的。想象一下，如果用户在100毫秒内连续点击了3次“提交”按钮，就会瞬间产生3个独立的导航请求。守卫会依次处理这3次请求，但它无法取消前两次——它的角色更像是流程中的“中间件”，而非请求的“拦截器”。
所以，答案很明确了：防连点的逻辑必须前置。核心思路是在用户点击的源头就抑制多余的调用，根本不让额外的 `router.push` 被执行。
推荐方案：封装带防抖的 router 跳转函数
一个直接且有效的策略是：不要直接调用 `router.push`，而是统一使用一个封装好的、内部集成了防抖逻辑的跳转函数。
立即学习“前端免费学习笔记（深入）”；
- 使用 `setTimeout` 配合一个标记位（例如 `isNa vigating`），这是最轻量、兼容性也最好的方式。
- 这里要特别注意，避免使用 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 !== 'Na vigationFailure') 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 });` - 在指令的实现中，当按钮被点击时，先判断 `!isTransitioning.value`，为 `true` 时才执行跳转。使用起来非常简洁：`v-safe-na v="{ path: '/user' }"`。
补充提醒：别忘了错误场景的兜底
即使我们添加了防抖逻辑，也还需要考虑一个关键场景：跳转失败后的状态处理。如果按钮因为防抖被锁定（比如变灰），但跳转却失败了，用户就会陷入无法再次操作的困境。
- `router.push` 可能因为多种原因失败，例如目标路由不存在、在守卫中调用了 `next(false)`、或者异步守卫抛出了异常。
- 因此，强烈建议在 `router.push` 返回的 Promise 的 `.catch` 方法中，重置防抖相关的锁定状态，或者给用户一个友好的提示。
- 对于一些特别敏感的操作，比如支付跳转，除了技术层面的防抖，还可以从交互设计上增加一道保险，例如叠加一个二次确认弹窗，从而从根源上降低误触的概率。
