vue router-link点击事件失效 - Kaiqisan

简答

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである , 今天解决一个忘记很久的一个问题，今天又重新遇到了，就顺便讲掉。

vue router-link点击事件失效

简答

这样不行

<router-link to="/app" @click="doClick">
    点击跳转
</router-link>

这样行

<router-link to="/app" @click.native="doClick">
    点击跳转
</router-link>

详解

<router-link to="/app" @click="doClick">
    点击跳转
</router-link>

methods: {
    
    
    doClick() {
    
    
        console.log('ok');
	}
}

此时，无法触发点击事件.

究其原因，是因为router-link标签会默认屏蔽所有的事件，且不只是点击事件。

所以需要在@click后面添加 .native

<router-link to="/app" @click.native="doClick">
    点击跳转
</router-link>

但其实，咱的自定义标签包括router-link都是会默认地屏蔽原生的监听事件，需要添加 .native修饰符

PS:非自定义标签就是HTML本来就存在的标签比如 div h1 h2 h3 ui li table form 等等

<HelloDemo @click.native="getClick"></HelloDemo>

这个HelloDemo就是我自己创建的标签，要触发点击事件，依旧需要在点击事件添加后缀 .native

其实这样自定义的标签，本质上都是属于vue组件，不相信的可以获取其dom然后打印出来

console.log(this.$refs.demo.__proto__);

在这些组件中，v-on只会监听自定义事件（即组件通过$emit触发的事件），而根元素的原生事件，是不会监听的。所以如果想要监听原生事件，就要使用“.native”修饰符去注册一个H5标签，之后就可以添加事件了。

扫描二维码关注公众号，回复： 11853210 查看本文章

总结

细节问题，记得吸取教训，看完我这篇博客之后就不要再犯这样的错误了！