在路由器上激活方法 link 在 Vue 中单击

Question

我正在处理 Chrome 扩展的帐户删除，我有以下按钮：

<button @click="remove" id="button_remove" class="btn btn-default" style="float: right;">Remove Account</button>

JS

methods:{
    remove(event){
       app.removeAccountData(url,apikey);
    }
},

我也有这个router-link:

<router-link :to="{ name: 'RemovedWId', params: { accountid: chosenAccount.apikey}}" text="delete_account"><span class="glyphicon glyphicon-trash" aria-hidden="true" style="margin-top: 2px; cursor: pointer;"></span> Remove Account</router-link>

有没有办法将 router-link 与 JS 函数一起使用？

Answer 1

Vue 2

对于 Vue Router 3，<router-link> 是 <a> 的组件包装器，因此我们需要使用 .native 修饰符才能正确接收事件：

<router-link @click.native="removeAccount" to="/remove">Remove</router-link>

demo 1

Vue 3

在 Vue Router 4 中，<router-link> 不再将其属性和事件处理程序传递给其内部组件，并且 Vue 3 不再支持 .native 事件修饰符。您必须通过 <router-link> 的 custom default slot.

手动应用 @click 处理程序

应用<router-link>'s custom prop启用默认插槽自定义。
在<router-link>的默认插槽中，添加一个<a>并绑定以下插槽道具：

一个。 href（解析URL到路由）到<a>.href

b。 navigate（执行导航到路线的方法）到<a>.@click。将 navigate 和 $event（特殊参数）传递给运行辅助方法的方法，然后将 navigate() 方法以 $event 作为参数。

<router-link to="/remove" custom v-slot="{ href, navigate }">
  <a :href="href" @click="wrapNavigate(navigate, $event)">Remove</a>
</router-link>

export default {
  methods: {
    removeAccount() {
      // ...
    },
    wrapNavigate(navigate, event) {
      this.removeAccount()
      navigate(event)
    },
  },
}

demo 2

在路由器上激活方法 link 在 Vue 中单击

Activate method on router link click in Vue

javascript

vue.js

vue-router

vuejs2

Vue 2

Vue 3