Nuxt: how to prevent nuxt-link goes to another page?

Question

I need to stop nuxt-link going to another page.

This is my code

<nuxt-link :to="item.url" data-toggle="collapse" class="nav-link" v-b-toggle="'collapse-'+index" :ref="'parent-'+index" @click.native="toggleSubMenuIcon(index)">


methods: {
    toggleSubMenuIcon(index) {
      this.$store.dispatch('layout/TOGGLE_SUBMENU_ICON', index)
    }
  }

I need a similar e.preventDefault() to block browser to visit the page at item.url

I has tried also

<nuxt-link :to="item.url" data-toggle="collapse" class="nav-link" v-b-toggle="'collapse-'+index" :ref="'parent-'+index" @click.native="toggleSubMenuIcon(index), event => event.preventDefault()">

without success.

I would not use a simple "hash" into the url 'cause I don't like it printed in the URL browser.

Thank you

Answer 1

try to add event="", its work for me

<nuxt-link event="" :to="item.url" data-toggle="collapse" class="nav-link" v-b-toggle="'collapse-'+index" :ref="'parent-'+index" @click.native="toggleSubMenuIcon(index), event => event.preventDefault()">