Add event listener to <router-link> component using "v-on:" directive - VueJS

Question

I'm attempting to add a custom handler InlineButtonClickHandler to a <router-link> component's click event, so that I can emit a custom appSidebarInlineButtonClick event.

But, my code isn't working. What am I doing wrong?

<template>
   <router-link :to="to" @click="InlineButtonClickHandler">
     {{ name }}
   </router-link>
</template>

<script type="text/babel">
export default {
  props: {
    to: { type: Object, required: true },
    name: { type: String, required: true }
  },
  methods: {
    InlineButtonClickHandler(event) {
      this.$emit('appSidebarInlineButtonClick');
    }
  }
} 
</script>

<a @click="$router.push(to).then(InlineButtonClickHandler)">{{name}}</a> for vue 3 — Sylvester Das
– Sylvester Das, Commented Sep 27, 2023 at 16:12

tony19 · Accepted Answer · 2022-07-15 19:39:08Z

158

You need to add the .native modifier:

<router-link
    :to="to"
    @click.native="InlineButtonClickHandler"
>
    {{name}}
</router-link>

This will listen to the native click event of the root element of the router-link component.

edited Jul 15, 2022 at 19:39

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 7, 2017 at 14:35

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

4 Comments

jasie Over a year ago

v-on:click.native is deprecated now, from what I read

TER Over a year ago

Given that "@click.native" is deprecated in Vue.js 3, an alternate option is to use a button styled as a link and in its @click method call this.$router.push({ path: 'to' });

Amin Eshtiaghi Over a year ago

@click.native or v-on:click.native is now deprecated in new versions of VueJS (>=3), use @click.prevent instead.

Kalnode Over a year ago

For Vue3: Until/unless there's an official way handled by VueRouter, this may be an alternative solution: github.com/vuejs/router/issues/846#issuecomment-808150258

许浩东 · Accepted Answer · 2017-04-02 03:35:54Z

11

<router-link:to="to">
    <span @click="InlineButtonClickHandler">{{name}}</span>
</router-link>

Maybe you can try this.

answered Apr 2, 2017 at 3:35

许浩东

1193 bronze badges

2 Comments

maxshuty Over a year ago

This will not be accessible since keyboard users could never activate that @click event

Patrick Cyiza Over a year ago

this will create inconsistencies. If, for some reason, you need a padding/margin in between the router link and span you will have zones of the link where you get routed but the click event is not triggered.

Boussadjra Brahim · Accepted Answer · 2021-12-06 08:51:30Z

With vue 3 and vue router 4 the @event and tag prop are removed according to this and instead of that you could use v-slot:

const Home = {
  template: '<div>Home</div>'
}
const About = {
  template: '<div>About</div>'
}
let routes = [{
  path: '/',
  component: Home
}, {
  path: '/about',
  component: About
}, ]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})


const app = Vue.createApp({
  methods: {
    test() {
      console.log("test")
    }
  }
})

app.use(router)

app.mount('#app')

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>

    <router-link to="/" v-slot="{navigate}">
      <span @click="test" role="link">Go to Home</span>
    </router-link>
    <br/>
    <router-link to="/about">Go to About</router-link>
  </p>

  <router-view></router-view>
</div>

Jan Verhulst · Accepted Answer · 2023-04-25 09:12:22Z

1

What I ended up doing is creating a wrapper component for the router link which emits the native click event as a regular click and then use that component instead:

<template>
  <router-link v-bind="$attrs" v-on="$listeners" @click.native="onClick">
    <slot />
  </router-link>
</template>

<script>
export default {
  name: 'RouterLinkWithClickEvent',
  methods: {
    onClick(...args) {
      this.$emit('click', ...args);
    }
  }
};
</script>

answered Apr 25, 2023 at 9:12

Jan Verhulst

463 bronze badges

Collectives™ on Stack Overflow

Add event listener to <router-link> component using "v-on:" directive - VueJS

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related