How to disable a vuejs router-link? How to disable a vuejs router-link? vue.js vue.js

How to disable a vuejs 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>


I don't think there's a suitable solution for this problem since router links do not have the disabled attribute, but one trick would be using tag="button" in order to add the required attribute as follows:

<router-link      to="/link"     tag="button"     :disabled="true">  Link</router-link>


You can use

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