本文介绍一种不依赖 css `pointer-events`、也不滥用 `preventdefault` 的 vue 原生方案，通过状态控制 + 动态事件绑定，安全实现链接点击节流（每 1500ms 最多响应一次）。
在 Vue 开发中，常需限制用户对按钮或链接的高频点击（如防止重复提交、避免路由快速跳转冲突）。但直接在 @click 中使用 setTimeout(() => e.preventDefault(), 1500) 是无效的——因为 e.preventDefault() 必须在事件同步执行阶段调用，延迟后调用已失去意义，且无法撤回已发生的导航行为。
✅ 正确思路是：提前拦截，而非事后阻止。即在点击瞬间判断是否允许触发，仅当未被“阻塞”时才启用 click 事件。
✅ 推荐实现方式（Vue 2 / Vue 3 Options API）
<router-link
:to="item.path"
:event="isBlocked ? [] : ['click']"
>
{{ item.name }}
</router-link>? 注意：:event 是 <router-link> 的 prop（Vue Router 3/4 均支持），用于显式指定响应的事件类型。传入空数组 [] 表示禁用所有原生事件（包括 click），从而彻底避免触发。
对应逻辑：
export default {
data() {
return {
isBlocked: false
}
},
methods: {
// 在 router-link 的 to 目标跳转前调用（推荐配合 @click.native 或自定义封装）
// 更稳妥的做法：改用普通 `<a>` + 手动编程式导航
handleLinkClick() {
if (this.isBlocked) return;
this.isBlocked = true;
// 立即触发导航（或执行其他业务逻辑）
this.$router.push(this.item.path).catch(() => {}); // 避免导航守卫中断报错
// 1500ms 后恢复可点击状态
setTimeout(() => {
this.isBlocked = false;
}, 1500);
}
}
}✅ 更灵活 & 推荐的写法（通用可复用）
若需保持 <router-link> 语义化，同时完全可控，建议改用 <a> 标签 + 编程式导航，并封装防抖逻辑：
立即学习“前端免费学习笔记（深入）”；
<a
href="#"
@click.prevent="handleLinkClick"
class="router-link"
>
{{ item.name }}
</a>methods: {
handleLinkClick() {
if (this.isBlocked) return;
this.isBlocked = true;
// 执行导航（支持 Vue Router 3/4）
this.$router.push(this.item.path).catch(err => {
console.warn('Navigation cancelled or failed:', err);
});
// 重置状态（注意：此处 setTimeout 不影响导航，仅控制 UI 可交互性）
setTimeout(() => {
this.isBlocked = false;
}, 1500);
}
}⚠️ 注意事项
- ❌ 避免在 @click 回调中异步调用 e.preventDefault() —— 它不会生效；
- ✅ 使用 @click.prevent 可确保默认行为被立即阻止，再由 JS 主动控制后续逻辑；
- ? 若需全局节流（如多个链接共用同一冷却期），可将 isBlocked 提升为计算属性或 Pinia store 状态；
- ? Vue 3 Composition API 用户可使用 ref 和 setTimeout 封装为自定义 Hook，例如 useThrottledClick(duration = 1500)。
通过状态驱动 + 主动控制事件绑定或导航时机，你既能保障用户体验（视觉反馈可配合 :class="{ disabled: isBlocked }"），又能确保逻辑健壮、无竞态风险。
