on click method with vue-router 4
Question
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?
1 answers
solution1
1 ACCPTED 2021-04-07 23:32:14
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.