[Vuejs]-VueJS router-link ctrl+click link with tag element

You can wrap router-link outside of an a tag

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

In this case the <a> will be the actual link (and will get the correct href), but the active class will be applied to the outer <td>.

Reference document

In order to direct router activity upon certain events you can access it programmatically. It’s easy to debug and you’ll have a lot of control of inputs and outputs.

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

The default tag for <router-link> is <a> with an href attribute, eg

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

Your browser knows what to do for a Ctrl+click, ie open the link in a new tab.

For other elements, there is no such default action so nothing happens.