How to disable a vuejs router-link?

Question

I have a single-page app that i've created using vue, and the nav links are all done using router-link tags. There are a couple of items in the nav that my boss wants to have in the nav but disabled so that people can get a glimpse of some features that will be coming soon. However I can't figure out how to completely disable a router-link!

preventDefault does nothing, @click.native.prevent="stopClick()" does nothing (i tried sending it to a function to see if that would prevent the click but it just calls the function and routes anyway despite the prevent), adding a disabled class and setting a css rule of pointer-events: none; does nothing. I'm not sure what else to try, is the only way around this to make the disabled links normal text and not router-links?

Answer 1

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> 

Answer 2

You can use

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