Vue组件中router-link搭配@click.prevent失效问题求助

嘿，这个问题我之前踩过一模一样的坑！原因其实很好理解：你给<tag>组件加的@click.prevent，本质是绑定在组件的根元素（也就是router-link）上，但router-link内部的<a>标签跳转行为是Vue Router在组件内部独立处理的，外部的prevent修饰符根本拦不住它的默认跳转逻辑。

下面给你几个实用的解决方案：

方案一：在组件内部直接拦截并触发自定义事件 #

最直接的办法是在组件里的router-link上添加@click.prevent，然后手动触发父组件需要的点击事件。这样既能阻止跳转，又能正常调用你的自定义方法：

组件代码：

<template>
  <router-link 
    :to="{ name: 'OtherPage'}" 
    @click.prevent="$emit('click')"
  ></router-link>
</template>

使用组件时，直接绑定方法即可，不用再加prevent修饰符：

<tag @click="myFunction"></tag>

方案二：通过Props灵活控制跳转行为 #

如果你的组件有时候需要正常跳转，有时候需要触发自定义方法，可以加一个开关Props来灵活切换：

组件代码：

<template>
  <router-link 
    :to="{ name: 'OtherPage'}" 
    @click="handleClick"
  ></router-link>
</template>

<script>
export default {
  props: {
    // 控制是否阻止跳转的开关
    preventNavigate: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(e) {
      if (this.preventNavigate) {
        // 阻止默认跳转行为
        e.preventDefault()
        // 触发父组件的点击事件
        this.$emit('click')
      }
    }
  }
}
</script>

使用组件时，开启开关并绑定自定义方法：

<tag :preventNavigate="true" @click="myFunction"></tag>

方案三：利用router-link插槽自定义可点击区域 #

如果不想修改组件核心逻辑，也可以用router-link的插槽自定义可点击区域，在插槽元素上添加prevent：

组件代码：

<template>
  <router-link :to="{ name: 'OtherPage'}">
    <!-- 把组件所有内容包裹在这个span里，点击它会阻止跳转 -->
    <span @click.prevent="$emit('click')">
      <!-- 这里放置你的组件内容 -->
    </span>
  </router-link>
</template>

不过这个方案有个小局限：只有点击<span>包裹的区域才会阻止跳转，点击router-link的空白区域还是会触发跳转，所以如果需要整个组件区域都拦截跳转，方案一或二更合适。

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