How to disable a vuejs router-link?

javascript vue.js vue-router routerlink
movac picture movac · Apr 23, 2020 · Viewed 11k times · Source

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

BTL picture BTL · Apr 23, 2020

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>

Related questions

How can I get query parameters from a URL in Vue.js?

How can I fetch query parameters in Vue.js? E.g. http://somesite.com?test=yay. Can’t find a way to fetch or do I need to use pure JS or some library for this?

Read More
How to add external JS scripts to VueJS Components

I've to use two external scripts for the payment gateways. Right now both are put in the index.html file. However, I don't want to load these files at the beginning itself. The payment gateway is needed only in when …

Read More
How to set URL query params in Vue with Vue-Router

I am trying to set query params with Vue-router when changing input fields, I don't want to navigate to some other page but just want to modify url query params on the same page, I am doing like this: this.$…

Read More