如何阻止 <router-link> 将用户重定向到另一个页面？

Question

我有这样的逻辑：如果用户是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 了。如何实现呢？

- alex

Answer 1

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

<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)"/>

- Decade Moon

---

谢谢。你一定是Vue老手了。 - alex

谢谢指点，虽然它部分起作用了。我设法让@click.native.prevent=中的函数起作用，但不知何故无法阻止页面重定向到:to路由。有人能给我指点一下吗？ - Andre W.

如果您正在寻找Vue3的解决方案，请查看我下面的答案：[https://dev59.com/_lcP5IYBdhLWcg3wJm_p#68083283] - Andre W.

Answer 2

Vue 3 解决方案

在 Vue3 中，"<router-link> 的 event 已被移除，您需要使用 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
      
        }
    }
};

- Andre W.

---

custom 是 router-link 组件中的重要属性，因此您可以插入自己的链接元素。 - honk31

如果我已经设置了自定义的 NavLink 和 AppLink 视图，并且这些视图包含一个带有 <slot>???</slot> 的 router-link，那么我该如何使用它？ - Jez

Answer 3

我曾经遇到过同样的问题，使用动态Vue组件作为解决方案。您还需要检查路由和div标签的样式差异。

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

- Дмитро Ракітін