原创~vue router-link添加点击事件

在学习vue中会遇到给router-link添加@click，@mouseover等事件

我想要做的是用v-for循环输出导航菜单，但是下面代码的@click事件和@mouseover并不会响应

<router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path}" @click="changeBgc(index)" @mouseover="changeBg(index)"  class="topbar-item">

原因：

 router-link会阻止click,mouseover事件，只用click不用native,事件不会触发。 

此时，应该给click和mouseover加上native

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

所以如果在想要在router-link上添加事件的话需要@click.native这样写

修改后：

<router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path}" @click.native="changeBgc(index)" @mouseover.native="changeBg(index)"  class="topbar-item">

 

参考：https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81-Prop