N
Nuxt•7mo ago
_duncanhall

Intercept click on NuxtLink and conditionally prevent navigation

Is it possible to include a click handler on a <NuxtLink> that can preform a check beofre conditionally allowing the navigation to continue? I would expect to be able to do something like this: 
function onLinkClick (event) {
  if (someCondition) {
    event.preventDefault()
  }
} 

<NuxtLink to="/somewhere" @click="onLinkClick" />
function onLinkClick (event) {
  if (someCondition) {
    event.preventDefault()
  }
} 

<NuxtLink to="/somewhere" @click="onLinkClick" />
In the above example, the onLinkClick function is called, but the navifation occurs regardless. Various posts online suggest using @click.native or @click.prevent but these make no difference - the click handler is called but the navigation always immediately occurs. I have also tried stopImmediatePropagation in place of preventDefault with no change. How can we programattically intercept a NuxtLink click?
1 Reply
Thr0nSK
Thr0nSK•7mo ago
Why would you want to do this? Intercepting the navigation in this way would still allow the clients without javascript visit the route, for example. I think that a middleware might be a better option, however, I don't know what your use-case is, so let's start with that 🙂

Did you find this page helpful?