router-link 点击事件

6,072 阅读1分钟

1、router-link直接添加@click,@mouseover等事件并不会触发

原因:router-link会阻止click,mouseover事件,只用click不用native,事件不会触发。

根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native修饰符。

image.png

2、router-link 开发环境和线上环境 to 和 click 事件触发时机不一致问题

<router-link to="pathName" @click.native="handleClick1"/>

开发环境:任何情况click都先触发,再跳转

线上环境:当前一次通过router.push(pathName)跳转后,再通过router-link跳转时会导致先跳转,再触发click

这个诡异的bug暂时还不知道原因。

曲线解决办法:将跳转前的触发事件加在handleClick2中,开发和线上环境表现一致,都会在跳转前触发

<router-link to="pathName" @click.native="handleClick1">
    <div @click="handleClick2"/>
</router-link>