router-link绑定点击事件失效

router-link 绑定事件不生效
在vue中绑定事件是一下这种方法:

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

@click = ‘函数名称’;

这两种写法都是正常。

但是我们使用了 vue-router 路由时会使用 标签来代替 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 其实就是一个封装好的 .vue 组件,所以需要 加.native修饰符才能绑定事件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值