С vue-router 3 можно было добавить метод на router-link с @click.native="myMethod", как описано здесь.
В vue 3 модификатор .native устарел.
Когда пользователь нажимает на <router-link to="somewhere" @click="myMethod">Click me</router-link>, возникает ошибка, при которой перезагружается все приложение.
С vue-router 4, как правильно запустить метод при нажатии на тег router-link ?
Убедитесь, что ваша vue-router версия не ниже 4.0.6 (запустите npm show vue-router или npm outdated). В этой версии есть исправление, позволяющее делать то, чего вы пытаетесь достичь. По сути, часть кода в вашем вопросе должна работать сейчас.
Итак, как:
<template>
<router-link to="/somePath" @click="myMethod()">Click me</router-link>
</template>
<script>
export default {
methods: {
myMethod() {
console.log('hello');
}
}
}
</script>
Вот исполняемый фрагмент с Vue 3 и новейшим маршрутизатором vue 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>
<a>тега<router-link>, помещая туда свой собственный обработчик @click. Тот, кто работал над<router-link>, знал, что ваша проблема возникнет: github.com/vuejs/vue-router-next/blob/ Я пытался сделать что-то вроде<router-link v-slot="{ navigate }" @click="() => { myMethod(); navigate;}, но вы не можете сразу использовать область слота для элемента, из которого вы его вытащили - person 3nuc schedule 03.04.2021