How to extend the onClick handler behaviour for a `router-link` in vue3 router

Question

I have a <router-link /> that I want to use to navigate to another page in a Vue 3 application, but I also want to run another function when this link is clicked.

Right now I have to use an extra <span /> element to wrap the <router-link /> and add the @click attribute there to rely on event bubbling. Adding the @click handler on <router-link /> causes the router link not to work and the browser thinks it is just a normal anchor href.

    <span @click="handleClose(imageId)">
      <router-link
        :to="{name: 'image', params: {'imageId': imageId}}"
        class="permalink">
        Permalink
      </router-link>
    </span>

Is there a better way?

Maybe this: stackoverflow.com/a/46403063/1844007 ?

sistematico
– sistematico

2021-02-10 05:15:56 +00:00
Commented Feb 10, 2021 at 5:15 — sistematico
– sistematico, Commented Feb 10, 2021 at 5:15

LeBen · Accepted Answer · 2021-02-14 14:28:05Z

5

To avoid potential weird concurrency bugs (the view change could happen before your method being called, method which would then be attached to an unmounted component), I would do a programmatic navigation in your method:

<template>
  <button type="button" @click="handleClose(imageId)">
    Permalink
  </button>
</template>

<script>
import router from '@/wherever/your/router/is/initialized';

export default {
  methods: {
    handleClose(imageId) {
      // Do your stuff
      router.push({ name: 'image', params: {'imageId': imageId}});
    }
  }
}
</script>

edited Feb 14, 2021 at 14:28

answered Feb 10, 2021 at 7:15

LeBen

2,03913 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CMCDragonkai Over a year ago

I need the anchor link as people might copy the permalink.

Jiro Matchonson Over a year ago

strugling with same thing, seems this is only way

IVO GELOV · Accepted Answer · 2021-02-11 18:41:23Z

4

You must use the .native modifier on the @click event of router-link. The reason is quite simple - router-link is a Vue component but it does not emit a click event. Therefore you have to listen for the native click event coming from the browser.

https://github.com/vuejs/vue-router/issues/800

var router = new VueRouter({
routes:
[
{path: '/', component: {
template: '#first',
methods:
{
  showAlert(text)
  {
    window.alert(text);
  }
}
}},
{path: '/second', component: {
template: '#second',
methods:
{
  showAlert(text)
  {
    window.alert(text);
  }
}
}},
]
});
new Vue(
{
template: '#main',
router: router,
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">test</div>
<template id="main">
<div>
<router-view></router-view>
</div>
</template>
<template id="first">
<router-link to="/second" @click.native="showAlert('second')">GOTO second</router-link>
</template>
<template id="second">
<router-link to="/" @click.native="showAlert('first')">GOTO first</router-link>
</template>

edited Feb 11, 2021 at 18:41

answered Feb 10, 2021 at 6:57

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

5 Comments

CMCDragonkai Over a year ago

It actually does emit the click event. And as in the first answer, both @click and @click.native resulted in the same behaviour, so neither worked. Only the span trick worked.

IVO GELOV Over a year ago

@click.native works just fine, as you can see if you run the code snippet above.

Jiro Matchonson Over a year ago

vue3 removed .native, this will not compile

IVO GELOV Over a year ago

@JiroMatchonson Can you provide a link to the official documentation, where the removal of .native is documented?

k3davis Over a year ago

I'm using vue-router 3.2.0 and this answer worked for me where @click did not.

Collectives™ on Stack Overflow

How to extend the onClick handler behaviour for a `router-link` in vue3 router

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related