Vue开发时router-link无法绑定点击事件的解决方案

Vue开发时router-link无法绑定点击事件的解决方案

问题描述

在使用router-link时,想要实现点击时更改一个变量的值。然而点击事件并没有被触发。经上网查询,发现给组件直接绑定事件是有问题的,因为组件无法辨认我们写的@click是不是子组件通过emit触发的自定义事件。

解决方案

将@click="js代码"修改为@click.native="js代码"即可。

Vue3中,`router-link`的`to`属性不生效可能是因为使用了错误的导航方式或者没有正确配置路由。在Vue3中,使用`router-link`,需要确保已经正确安装并配置了Vue Router。另外,`to`属性的值应该是一个有效的路由路径。如果`to`属性的值设置正确而仍然不生效,可能是因为事件绑定问题。 在Vue3中,`router-link`的点击事件可以通过`v-slot`来绑定,而不是使用`@click`。以下是一个示例,展示了如何正确使用`router-link`以及绑定点击事件: ```html <router-link to="/date" v-slot="{ navigate }"> <a @click="nav_click(navigate)">最新</a> </router-link> methods: { nav_click(navigate) { // 执行你的逻辑 navigate() } } ``` 请注意,这里的点击事件参数是`navigate`,而不再是之前的`$router`。通过调用`navigate()`来进行路由导航。确保你已经正确地配置了Vue Router,并且`to`属性的值是有效的路由路径。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [router-link 绑定事件不生效](https://blog.csdn.net/qq_42565994/article/details/106403676)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [【Vue项目练习】router-link跳转失败原因](https://blog.csdn.net/xptxhx/article/details/127786820)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值