vue.js - 如何使路由器链接使用父 v-on :click completely

Question

<parent v-on:click="isActive = !isActive">
   <router-link :to="{ name: 'home'}">{{tag}}</router-link>
</parent>

如果单击 router-link，父级中的 v-on:click 仍会捕获该事件。

如何让router-link完全消费点击事件？

Answer 1

确定找到解决方法。由于 router-link 呈现一个 a 然后 v-on:click.stop 不会传播到呈现的 a。但是如果你用一个包含停止的 div 包裹它，它就会工作。

<parent v-on:click="isActive = !isActive">
  <div v-on:click.stop>
   <router-link :to="{ name: 'home'}">{{tag}}</router-link>
  </div>
</parent>