VueJS router-link ctrl + щелчок по ссылке с элементом тега

Question

Когда я использую ссылку маршрутизатора без тега, я могу нажать Ctrl + щелчок по этой ссылке, чтобы открыть ссылку в новой вкладке. При использовании с тегом. Например tag="td" ctrl + click больше не работает. То же самое относится и к элементам с возможностью щелчка, произведенным с @click.prevent

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

Это работает с Ctrl + клик

<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>.

Справочный документ

Answer 2

Тег по умолчанию для <router-link> - <a> с атрибутом href, например,

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

Ваш браузер знает, что делать для нажатия Ctrl +, т. Е. Открыть ссылку в новой вкладке.

Для других элементов такого действия по умолчанию нет, поэтому ничего не происходит.