Menu
With vue-router 3, it was possible to add a method on router-link with @click.native="myMethod" like explained here.
In vue 3 the .native modifier was deprecated.
When a user clicks on <router-link to="somewhere" @click="myMethod">Click me</router-link>,
it creates a bug where the entire app reloads.
With vue-router 4, what is the correct way to trigger a method on click on a router-link tag?
991
Make sure your vue-router version is at least 4.0.6 (run npm show vue-router or npm outdated). In that version, there's a fix that allows doing what you're trying to achieve. Basically, the piece of code in your question should just work now.
So like:
<template>
<router-link to="/somePath" @click="myMethod()">Click me</router-link>
</template>
<script>
export default {
methods: {
myMethod() {
console.log('hello');
}
}
}
</script>
Here's a runnable snippet with Vue 3 and the newest vue router 4
const App = {
template: `
<div class="wrapper">
<router-view />
<router-link to="/hello" @click="myMethod()">Link (click me)</router-link>
Did my method run: {{didMyMethodRun}}
</div>
`,
data() {
return {
didMyMethodRun: false,
}
},
methods: {
myMethod() {
this.didMyMethodRun = true
}
}
}
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{path: '/', component: {template: 'You are now on default route'}},
{path: '/hello', component: {template: 'You are now hello route'}},
]
})
const app = Vue.createApp(App);
app.use(router)
app.mount('#app');.wrapper {
display: flex;
flex-direction: column;
}<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<html>
<body>
<div id="app"/>
</body>
</html>Link to CHANGELOG
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With