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

Question

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

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

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

有什么办法吗？谢谢！

Answer 1

您正在寻找.prevent修饰符。

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

Answer 2

请参阅指南中的事件处理：

事件修饰符

调用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.

jsFiddle上的实时示例（因为Stack Snippets不允许异地链接）。