Vue2中注册在router-link上事件无效解决方法

最新推荐文章于 2024-10-18 23:50:39 发布

原创最新推荐文章于 2024-10-18 23:50:39 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨了在使用Vue.js框架时遇到的router-link标签上绑定click事件不触发的问题，并给出了具体的解决方案。通过添加native修饰符，可以使得router-link上的事件正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天用vue在做一个tab栏切换的时候，偶然发现我绑定在router-link上的click并不会触发，
后来测试发现，所有绑定在router-link中的事件都不会促发
此后查看了官方的文档，也并没有给出明确的说明：

代码如下：

   <router-link @click="change"><span>{{item.text}}</span></router-link>

此刻我发现，无论如何定义在methods 中的 change函数并不会触发，这是为什么呢？
在github查看了vue-router的代码后发现：
图片

事件被阻止

如果当前router-link的tag不是a的话（官方文档中说明：默认为a，可以通过tag改变渲染后的标签），那么就会往自己的子元素（组件）找，找到的第一个就会把一些属性及时间覆盖过去。
所以此时事件是被阻止了。个人看法：因为router-link的作用是单纯的路由跳转，如果不阻止事件的话，也许会有很多坑，所以作者干脆阻止了其他事件的触发

如何解决

    <router-link  @click.native="change"><span>{{item.text}}</span></router-link>

只需要在@click后面加上native就可以了

原生事件

添加native事件修饰符之后变为原生事件

$element.addEventListener(click, callback);

此时a标签并不会阻止，至此便可以解决绑定在router-link身上的事件不会触发的问题。
其次，想要实现tab切换添加class可以在router中添加如下配置：

export default new Router({
  routes: [],// 路由跳转配置
  linkActiveClass:'active' // 在路由中添加配置  active 为跳转到该路由时添加的激活类名
})