VueJS中如何结合preventDefault与Timeout实现点击间隔限制？

需求：让router-link点击后1500ms内无法再次触发跳转，仅允许每1500ms点击一次，不使用CSS的pointer-events，通过代码结合preventDefault解决。

原尝试代码：

<router-link :to="item.path" @click="blockedLinkOnClick(e)">{{ item.name }}</router-link>

原处理方法：

blockedLinkOnClick(e) {
  setTimeout(() => e.preventDefault(), 1500);
}

问题分析 #

上述写法无效的核心原因：点击事件的默认行为（路由跳转）会在事件处理函数同步执行完成后立即触发，延迟调用e.preventDefault()根本无法阻止本次跳转，更无法限制后续点击操作。

正确实现方式 #

通过维护一个状态变量标记当前是否允许点击，点击时先判断状态：

• 若不允许点击，直接调用e.preventDefault()阻止跳转
• 若允许点击，先标记为禁止状态，再通过setTimeout在1500ms后恢复允许状态

Vue2选项式API完整代码：

<template>
  <router-link :to="item.path" @click="handleLinkClick($event)">{{ item.name }}</router-link>
</template>

<script>
export default {
  data() {
    return {
      isLinkClickAllowed: true // 标记是否允许点击
    };
  },
  methods: {
    handleLinkClick(e) {
      if (!this.isLinkClickAllowed) {
        // 当前不允许点击，阻止默认跳转行为
        e.preventDefault();
        return;
      }
      // 标记为禁止点击
      this.isLinkClickAllowed = false;
      // 1500ms后恢复允许点击
      setTimeout(() => {
        this.isLinkClickAllowed = true;
      }, 1500);
    }
  }
};
</script>

Vue3组合式API完整代码：

<template>
  <router-link :to="item.path" @click="handleLinkClick($event)">{{ item.name }}</router-link>
</template>

<script setup>
import { ref } from 'vue';

const isLinkClickAllowed = ref(true);

const handleLinkClick = (e) => {
  if (!isLinkClickAllowed.value) {
    e.preventDefault();
    return;
  }
  isLinkClickAllowed.value = false;
  setTimeout(() => {
    isLinkClickAllowed.value = true;
  }, 1500);
};
</script>

内容的提问来源于stack exchange，提问作者TheCzechTayen