Nuxt：如何防止 nuxt-link 转到另一个页面？

Posted 2023-02-22

【中文标题】Nuxt：如何防止 nuxt-link 转到另一个页面？

【英文标题】：Nuxt: how to prevent nuxt-link goes to another page?

【发布时间】：2020-05-10 03:28:14

【问题描述】：

我需要阻止nuxt-link 转到另一个页面。

这是我的代码

<nuxt-link :to="item.url" data-toggle="collapse" class="nav-link" v-b-toggle="'collapse-'+index" :ref="'parent-'+index" @click.native="toggleSubMenuIcon(index)">


methods: 
    toggleSubMenuIcon(index) 
      this.$store.dispatch('layout/TOGGLE_SUBMENU_ICON', index)
    
  

我需要一个类似的 e.preventDefault() 来阻止浏览器访问 item.url 处的页面

我也试过了

<nuxt-link :to="item.url" data-toggle="collapse" class="nav-link" v-b-toggle="'collapse-'+index" :ref="'parent-'+index" @click.native="toggleSubMenuIcon(index), event => event.preventDefault()">

没有成功。

我不会在网址中使用简单的“哈希”，因为我不喜欢在网址浏览器中打印它。

谢谢

【参考方案1】：

尝试添加event=""，它对我有用

<nuxt-link event="" :to="item.url" data-toggle="collapse" class="nav-link" v-b-toggle="'collapse-'+index" :ref="'parent-'+index" @click.native="toggleSubMenuIcon(index), event => event.preventDefault()">

【讨论】：

这太奇怪了。我有一个 NuxtLink 在这样定义时运行良好：<NuxtLink :to="myURL" @click.prevent="myFunction">link</NuxtLink>。但是，在此过程中，事件捕获停止工作，现在只有在我将其更新为：<NuxtLink :to="myURL" event="" @click.native="myFunction(), event => event.preventDefault()">link</NuxtLink>... 我不明白为什么，但感谢您的提示！