How to disable a vuejs router-link?

There is nothing built in, and probably won't ever be. That said, what worked great for me is to use CSS.

<router-link to="/my-route" :class="{ disabled: someBoolean }" />

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

The opacity makes it look disabled, and the pointer-events: none; makes it so you don't need to also handle :hover styles, or set the cursor style.

You can use

<router-link 
  :is="isDisabled ? 'span' : 'router-link'"
  to="/link"
>
  /link
</router-link>

There is still no native solution today. But there is an open PR for this on the vue-router repo : https://github.com/vuejs/vue-router/pull/2098.

A workaround is to use :

<router-link 
  :disabled="!whateverActivatesThisLink" 
  :event="whateverActivatesThisLink ? 'click' : ''"
  to="/link"
>
  /link
</router-link>