使用“v-on:”指令向 <router-link> 组件添加事件监听器 - VueJS答案

【问题标题】：Add event listener to <router-link> component using "v-on:" directive - VueJS使用“v-on:”指令向 <router-link> 组件添加事件监听器 - VueJS
【发布时间】：2017-06-24 19:30:13
【问题描述】：

我正在尝试将自定义处理程序 InlineButtonClickHandler 添加到 <router-link> 组件的 click 事件，以便我可以发出自定义 appSidebarInlineButtonClick 事件。

但是，我的代码不起作用。我究竟做错了什么？

<template>
   <router-link :to="to" @click="InlineButtonClickHandler">
     {{ name }}
   </router-link>
</template>

<script type="text/babel">
export default {
  props: {
    to: { type: Object, required: true },
    name: { type: String, required: true }
  },
  methods: {
    InlineButtonClickHandler(event) {
      this.$emit('appSidebarInlineButtonClick');
    }
  }
} 
</script>

【问题讨论】：

可以显示控制台日志吗？

标签： vuejs2 vue.js vue-router

【解决方案1】：

您需要添加.native modifier：

<router-link
    :to="to"
    @click.native="InlineButtonClickHandler"
>
    {{name}}
</router-link>

这会监听router-link组件根元素的原生点击事件。

【讨论】：

v-on:click.native 现在已被弃用，根据我的阅读
鉴于“@click.native”在 Vue.js 3 中已弃用，另一种选择是使用样式为链接的按钮并在其 @click 方法中调用 this.$router.push( { 路径：'to' });
@click.native 或 v-on:click.native 现在在新版本的 VueJS (>=3) 中已弃用，请改用 @click.prevent。

【解决方案2】：

<router-link:to="to">
    <span @click="InlineButtonClickHandler">{{name}}</span>
</router-link>

也许你可以试试这个。

【讨论】：

【解决方案3】：

在 vue 3 和 vue 路由器 4 中，@event 和 tag 属性根据this 被删除，您可以使用v-slot 代替它：

const Home = {
  template: '<div>Home</div>'
}
const About = {
  template: '<div>About</div>'
}
let routes = [{
  path: '/',
  component: Home
}, {
  path: '/about',
  component: About
}, ]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})


const app = Vue.createApp({
  methods: {
    test() {
      console.log("test")
    }
  }
})

app.use(router)

app.mount('#app')

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>

    <router-link to="/" v-slot="{navigate}">
      <span @click="test" role="link">Go to Home</span>
    </router-link>
    <br/>
    <router-link to="/about">Go to About</router-link>
  </p>

  <router-view></router-view>
</div>

【讨论】：