VueJS router-link ctrl+click 带有标签元素的链接答案

【问题标题】：VueJS router-link ctrl+click link with tag elementVueJS router-link ctrl+click 带有标签元素的链接
【发布时间】：2018-12-05 23:38:54
【问题描述】：

当我使用没有标签的路由器链接时，我可以 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>

这不起作用。

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

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

为了在某些事件上引导路由器活动，您可以通过编程方式访问它。它易于调试，并且您可以对输入和输出进行大量控制。

<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: …});
  };
}

【讨论】：

【解决方案2】：

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

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

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

Reference document

【讨论】：

【解决方案3】：

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

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

您的浏览器知道如何处理 Ctrl+单击，即在新选项卡中打开链接。

对于其他元素，没有这样的默认操作，所以什么都不会发生。

【讨论】：