[英]on click method with vue-router 4
使用 vue-router 3,可以使用@click.native="myMethod"
在router-link
上添加一個方法,就像在此處解釋的那樣。
在 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.