javascript - VueJS router-link 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>

在本例中 <a>将是实际的链接(并将获得正确的 href)，但事件类将应用于外部 <td> .

Reference document