When I use router link without a tag I can ctrl+click this link to open up the link in a new tab. When used with a tag. For example tag="td" ctrl+click does not work anymore. The same goes for click-able elements produced with @click.prevent

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

This works with ctrl+click

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

This does not work.

What causes this behavior and what can be done about it?

When I use router link without a tag I can ctrl+click this link to open up the link in a new tab. When used with a tag. For example tag="td" ctrl+click does not work anymore. The same goes for click-able elements produced with @click.prevent

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

This works with ctrl+click

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

This does not work.

What causes this behavior and what can be done about it?

• javascript
• vue.js
• vue-router

3 Answers 3

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.