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>