今天用vue在做一个tab栏切换的时候,偶然发现我绑定在router-link上的click并不会触发,
后来测试发现,所有绑定在router-link中的事件都不会促发
此后查看了官方的文档,也并没有给出明确的说明:
代码如下:
|
|
此刻我发现,无论如何定义在methods 中的 change函数并不会触发,这是为什么呢?
在github查看了vue-router的代码后发现:
事件被阻止
如果当前router-link的tag不是a的话(官方文档中说明:默认为a,可以通过tag改变渲染后的标签),那么就会往自己的子元素(组件)找,找到的第一个就会把一些属性及时间覆盖过去。
所以此时事件是被阻止了。个人看法:因为router-link的作用是单纯的路由跳转,如果不阻止事件的话,也许会有很多坑,所以作者干脆阻止了其他事件的触发
如何解决
|
|
只需要在@click后面加上native就可以了
原生事件
添加native事件修饰符之后变为原生事件
此时a标签并不会阻止,至此便可以解决绑定在router-link身上的事件不会触发的问题。
其次,想要实现tab切换添加class可以在router中添加如下配置: