router-link 绑定事件不生效

Posted 小则又沐风

tags:

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

在vue中绑定事件是一下这种方法:

v-on:click=‘函数名称‘;

@click = ‘函数名称‘;

这两种写法都是正常。

但是我们使用了 vue-router 路由时会使用 <router-link> 标签来代替 a 标签跳转。我们在 vue-router 标签绑定 @click 事件 。

 <router-link to="/date" @click="nav_click">最新</router-link>

methods: {
 nav_click: function() {
       console.log(1)
 }
}

却发现函数并没有执行。这是怎么回事。。。  

加 .native 修饰符就可以执行事件了。

 <router-link to="/date" @click.native="nav_click">最新</router-link>

methods: {
 nav_click: function() {
       console.log(1)
 }
}  

解释:

1: 因为它是自定义标签,根本就没有事件和方法,所以不触发,加个native 就是告诉vue 这个标签现在有主了 它是H5标签 可以加事件了。

2:父组件要想在子组件监听自己的click事件就得加native,router-link是标签啊。哪里有父组件???? 

 群里大佬一句说明了原因 router-link  其实就是一个封装好的 .vue 组件,所以需要 加.native修饰符才能绑定事件

以上是关于router-link 绑定事件不生效的主要内容,如果未能解决你的问题,请参考以下文章

IOS设备上给body绑定click事件不生效及其解决办法

前端jQuery中input绑定回车事件不生效,直接刷新页面的问题

React 绑定 onClick 事件不生效问题分析,原来是绑定方法二不归!初学需注意

React 绑定 onClick 事件不生效问题分析,原来是绑定方法二不归!初学需注意

React 绑定 onClick 事件不生效问题分析,原来是绑定方法二不归!初学需注意

jquery动态添加的元素绑定的事件不生效的问题