vue router-link 上添加點擊事件

在vue學習中遇到給router-link 標簽添加事件@click 、@mouseover等無效的情況

我想要做的是v-for遍歷出來的選項卡，

鼠標移上去出現刪除標簽，移除標簽消失的效果

原代碼：

<router-link  v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag(index)" @mouseout="outTag(index)">{{item.listTitle}}
    <i class="contain_tab_close" v-show="selected==index"></i>
</router-link>

后在發現參考  

https://segmentfault.com/q/1010000007896386

http://www.jianshu.com/p/0a8a89687bb6

根據Vue2.0官方文檔關於父子組件通訊的原則，父組件通過prop傳遞數據給子組件，子組件觸發事件給父組件。但父組件想在子組件上監聽自己的click的話，需要加上native修飾符。

所以如果在想要在router-link上添加事件的話需要@click.native這樣寫

所以如果要事件有效的話，改成如下：

<router-link  v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover.native="overTag(index)" @mouseout.native="outTag(index)">{{item.listTitle}}
    <i class="contain_tab_close" v-show="selected==index"></i>
</router-link>

 

學習筆記，如有不足請多多指教！