VueJS 路由器链接 ctrl+click 带有标签元素的链接

Question

当我使用没有标签的路由器链接时，我可以 ctrl+单击此链接以在新选项卡中打开该链接。与标签一起使用时。例如tag="td"ctrl+click 不再起作用。使用生成的可点击元素也是如此@click.prevent

<router-link :to="`/contracts/${row.id}`">
  {{ row.type | initials }}
</router-link>

这适用于 ctrl+click

<router-link tag="td" :to="`/contracts/${row.id}`">
  {{ row.type | initials }}
</router-link>
<td @click.prevent="someAction()">
  {{ row.type | initials }}
</router-link>

这不起作用。

是什么导致了这种行为，可以采取什么措施？

Answer 1

您可以包装router-link在a标签之外

<router-link tag="td" :to="`/contracts/${row.id}`">
  <a>
  {{ row.type | initials }}
  </a>
</router-link>

在这种情况下， the<a>将是实际链接（并将获得正确的 href），但活动类将应用于外部<td>.

参考文件