vue3: Optionally turning RouterLink into a link

Question

I checked the docs but before opening a vue feature request I'd like to be sure if it's implemented already.

I'd like 'My link text' to optionally become a link without having to duplicate the content of the link tag. I'm currently doing this:

<RouterLink v-if="hasLink" :to="/my_destination">
  My link text
</RouterLink>
<div v-else>
  My link text
</div>

I'd like something like this

<RouterLink disabled="!hasLink" :to="/my_destination">
  My link text
</RouterLink>

Answer 1

<RouterLink> will be rendered as an anchor tag by default, which does not have disable attribute (see a related Stackoverflow page and MDN doc). If you want to achieve this, I'd suggest using class binding for this purpose.

---

Template code:

<RouterLink :class="{ disabled: isDisabled }" :to="/my_destination">
  My link text
</RouterLink>