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

Posted 2023-02-22

【中文标题】使用“v-on:”指令向 <router-link> 组件添加事件监听器 - VueJS

【英文标题】：Add event listener to <router-link> component using "v-on:" directive - 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>

【问题讨论】：

可以显示控制台日志吗？

【参考方案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>