NuxtLink @click action before routing

Question

I need to run a method before NuxtLink navigates to a route. In the method I want to decide whether to release it or not. Like in vanilla JS:

<a href="some-page" onclick="return count > 10 ? true : false">Done</a>

I know how to stop NuxtLink and run the method instead, but how do I pause it, make some actions and decide whether to release it or not?

Hm, at the end if you're not navigating to some place, why not just use a regular `button` + `@click` combo here? Seems like a lot of work for this use case. Also, how do you cancel a navigation with a nuxt-link as of right now? — kissu, Sep 07 '22 at 14:59
In some cases I need to navigate to Nuxt routes (`pages/some-page`) and in other I need to do some actions before. Cancel NuxtLink: `` — Yosef, Sep 07 '22 at 15:15
So, why don't you get the test into the action, then move forward if the conditions are met? — kissu, Sep 07 '22 at 16:12
This is the question. This method completely stops the default behavior of NuxtLink. I don't know how to release it to routing — Yosef, Sep 07 '22 at 16:54
In the method, you can use `$router.push` based on the location of your `:to` prop IMO, you don't have such thing in your `action($event)` state? — kissu, Sep 07 '22 at 17:01
Yes I can, but I thought that there should be a default way like in vanilla JS — Yosef, Sep 08 '22 at 10:33
Using `$router` is pretty much the default in a Vue context. — kissu, Sep 08 '22 at 10:51

score 0 · Answer 1 · edited Nov 06 '22 at 14:36

0

You have to use @click.native with NuxtLink and RouterLink.

So, your code should look like this

<NuxtLink @click.native='clickAction()' to='/my-page'>
  Some link text
</NuxtLink>

edited Nov 06 '22 at 14:36

kissu

40,416
14
65
133

answered Nov 06 '22 at 14:36

Thomas K.

121
1
10

score 0 · Answer 2 · answered Nov 24 '22 at 14:08

0

Nuxt3:

<script lang="ts" setup>
  const anyFunction = () => {
    console.log('easy')
  }
</script>

<template>
  <NuxtLink
    :to="'/'"
    @click.prevent="anyFunction()"
  >easy</NuxtLink>
</template>

answered Nov 24 '22 at 14:08

S3n

59
7

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 28 '22 at 15:15

NuxtLink @click action before routing

2 Answers2