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

时间:2017-02-07 14:01:44

标签: vuejs2 vue.js vue-router

我正在尝试向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>

4 个答案:

答案 0 :(得分:52)

您需要添加.native modifier

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

这将侦听router-link组件的根元素的本机点击事件。

答案 1 :(得分:0)

一个很好的解决方案是:

<a v-link='{name: "home"}' v-on:click.capture='InlineButtonClickHandler'>Home</a>

答案 2 :(得分:0)

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

也许你可以试试这个。

答案 3 :(得分:0)

使用 vue 3 和 vue router 4,您不需要添加任何修饰符:

1
const Home = {
  template: '<div>Home</div>'
}
const About = {
  template: '<div>About</div>'
}

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')