2

使用 vue-router 3，可以添加一个方法router-link，@click.native="myMethod"就像这里解释的那样。

在 vue 3 中，该.native修饰符已被弃用。

当用户点击 时<router-link to="somewhere" @click="myMethod">Click me</router-link>，它会创建一个错误，整个应用程序会重新加载。

使用vue-router 4router-link ，点击标签时触发方法的正确方法是什么？

4

1 回答 1

1

确保您的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>

链接到变更日志

于 2021-04-07T23:32:14.723 回答