【问题标题】：How to stop <router-link> from sending the user to another page?如何阻止 <router-link> 将用户发送到另一个页面？
【发布时间】：2017-06-29 02:35:33
【问题描述】：

我有这样的逻辑：用户是V2 使用用户到subHeaderRouter.router 中的url。如果用户没有启动this.openModal:

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

handleOpenModal () {
  if (this.IsV2User) return
  this.openModal('changeUserType', 'user.changeUserType')
}

我现在唯一需要做的就是停止:to 然后她的用户不是V2。如何做到这一点？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

Vue 3 解决方案

在 Vue3 中，event 已从 "<router-link> 变为 removed，您需要改用 v-slot 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
      
        }
    }
};

【讨论】：

【解决方案2】：

您可以通过不指定default event 来阻止默认的<router-link> 行为，并使用.native 修饰符手动处理click 事件：

<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 的老手。
感谢您的指点，虽然它部分有效。我设法让@click.native.prevent= 中的函数工作，但不知何故无法阻止页面被重定向到:to 中的路由。有人可以给我指点吗？
如果你在下面查看我的答案（Vue3 的解决方案）[stackoverflow.com/a/68083283/7362226]