vue router-link 上添加点击事件

Posted 哎哟喂勒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue router-link 上添加点击事件相关的知识,希望对你有一定的参考价值。

在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况

我想要做的是鼠标移上去出现删除标签,移除标签消失的效果

原代码:

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

 

学习笔记,请多多指教!

以上是关于vue router-link 上添加点击事件的主要内容,如果未能解决你的问题,请参考以下文章

Vue-Router 源码解析 router-link组件的用法及原理

VUE路由router-link和router.push用法

vue中router-link的click事件失效的解决办法

vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新

为啥vue中子路由点击router-link只能刷新一次子页面?

vue 路由配置