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>

 

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