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

Answer 2

<router-link>的默认标签是具有<a>属性的href，例如

<a href="/contracts/123">RowType</a>

您的浏览器知道Ctrl + click的操作，即在新选项卡中打开链接。

对于其他元素，没有这样的默认操作，因此什么也没有发生。

Answer 3

为了在某些事件上引导路由器活动，您可以编程方式访问它。调试起来很容易，您可以对输入和输出进行很多控制。

<td @click.prevent="someAction($event)">xxxx</td>

...

someAction(event) {
  if (event.ctrlKey === true) {
    // if click + ctrl
    let routeData = this.$router.resolve({path: …});
    window.open(routeData.href, '_blank');
  } else {
    // if just click
    this.$router.push({path: …});
  };
}