Vue.js：如何防止浏览器转到href链接，而只执行@click方法？

Question

所以我的应用程序中有一个这样的链接：

<a href="/threads/my-first-thread/" @click="openThread">My first thread</a>

此刻，当我单击链接时，浏览器将跟随href链接并执行“ openThread”方法。我想将链接保留在其中，以便它向用户显示单击会将其带到何处，但是我不希望浏览器实际跟随该链接（我而是打开灯箱，然后使用pushState更改网址） 。我希望它仅执行给定的方法。

有没有办法做到这一点？谢谢！

Answer 1

请参见指南中的Event Handling：

  

事件修改器

     

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常普遍的需求。尽管我们可以轻松地在方法内部执行此操作，但最好是这些方法可以纯粹与数据逻辑有关，而不要处理DOM事件详细信息。

     

为解决此问题，Vue为v-on提供了事件修饰符。回想一下修饰符是用点表示的指令后缀。

     

.stop   
.prevent   
.capture   
.self   
.once   
.passive

所以：

<a href="/threads/my-first-thread/" @click.prevent="openThread">My first thread</a>
<!-- -------------------------------------^^^^^^^^                    --->

...或者，当然，接受event参数并调用preventDefault.

Live Example on jsFiddle（因为堆栈摘录不允许站点外链接）。

Answer 2

您正在寻找.prevent修饰符。

<a href="/threads/my-first-thread/" @click.prevent="openThread">My first thread</a>

Answer 3

以防万一有人需要使用 vue router，这里是解决方案：

<router-link
  :to="{ name: 'routeName' }"
  :event="''"
  @click="functionName"
>

Taken from vue-router git issue。