通过指定不监听默认事件并使用.native修饰符手动处理click事件，可以防止默认<router-link>行为：

<router-link
  v-for="subHeaderRouter in subHeaderRouters"
  event=""
  :to="subHeaderRouter.router"
  @click.native.prevent="handleOpenModal(subHeaderRouter.router)"/>

handleOpenModal(route) {
    if (this.IsV2User) {
        this.$router.push(route)
    } else {
        this.openModal('changeUserType', 'user.changeUserType')
    }
}

如果您觉得event=""很奇怪，那么它也可以使用空属性：

<router-link
  v-for="subHeaderRouter in subHeaderRouters"
  event
  :to="subHeaderRouter.router"
  @click.native.prevent="handleOpenModal(subHeaderRouter.router)"/>

Vue 3溶液

在Vue3中，event已从"<router-link>中删除，您将需要使用v槽API。

<router-link :to="yourRoute" custom v-slot="{ href, navigate }">
    <a v-if="yourBoolean" @click="handleEvent()">Run the function</a>
    <a
        v-else
        :href="href"
        @click="navigate">
        Go to route in "to"
    </a>
</router-link>

// Vue 3 Composition API

export default {  
    setup() {
        const handleEvent = () => {
            
           // Add your logic here
      
        }
    }
};

我遇到了同样的问题，并使用动态Vue组件作为解决方案。您还必须检查路由器和div标记的样式差异。

<component 
  :is=" condition ? 'router-link' : 'div' "
  @click="handleOpenModal"  
  :to="your_link">
</component>