VueJS router-link ctrl+click link with tag element

Question

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?

ittus · Accepted Answer · 2018-06-27 07:35:10Z

8

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

answered Jun 27, 2018 at 7:35

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pawel Kam · Accepted Answer · 2020-04-14 15:55:37Z

1

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

answered Apr 14, 2020 at 15:55

Pawel Kam

2,1823 gold badges18 silver badges34 bronze badges

Comments

Phil · Accepted Answer · 2018-06-27 07:19:43Z

0

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.

answered Jun 27, 2018 at 7:19

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

VueJS router-link ctrl+click link with tag element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related