路由守卫无法防止连点跳转，因其在导航发起后才执行；防连点必须前置，在调用 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中重置防抖状态或提示用户，避免按钮“变灰后永远无法再点” - 对敏感操作（如支付跳转），还可叠加二次确认弹窗，从交互层进一步降低误触概率
