关于给router-link添加点击事件失效的解决方法

最新推荐文章于 2024-04-20 06:34:51 发布
最新推荐文章于 2024-04-20 06:34:51 发布
阅读量1.8k 收藏 2
点赞数
文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46212682/article/details/123801792
版权

在router-link标签中，仅仅用于路由的切换，而router-link会阻止其他的点击事件的存在，加上native的作用是：给组件绑定原生事件

<router-link  to="/" @click.native="muenSwitch(index)">
  首页
</router-link>

在这里插入图片描述

这样你就可以点击到相应的事件了

朱同學8245
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击router-link时候会发生什么？
思索的涟漪，突破自我
10-03 1224
会触发Vue Router的导航流程，这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作，最终将目标组件渲染到页面中。: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配，以确定最终前往哪个路由。: 如果一切正常，Vue Router将根据匹配到的目标路由，执行页面的切换操作。: Vue Router会拦截这个点击事件，阻止浏览器默认的页面跳转。），Vue Router会依次执行这些操作，以决定是否允许导航。属性，这个属性指定了目标路由的路径或命名路由。
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
yangyangdt的博客
01-05 2705
vue3中按vue2做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。因为在vue2中...
vue 中router-link属性设置(1)
最新发布
2401_84149996的博客
04-20 718
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
VUE ROUTER-LINK 上添加点击事件
热门推荐
小猪奋斗
02-26 1万+
点击事件失败原因：router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况解决方案：根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click
router-link添加点击事件
THINK_OF_的博客
09-19 6085
&lt;router-link @click.native="doSomething" to="/a" &gt;&lt;/router-link&gt; 这样既可以跳转，点击事件也可以执行，做tab切换的时候可以用
vue路由的使用以及如何解决在router-link上添加点击事件无效的情况
Maximum_Patrick的博客
12-18 1900
vue路由的使用以及如何解决在router-link上添加点击事件无效的情况 一、vue路由的使用 首先要去npm商店下载安装vue-router，安装好之后新建router.js文件将vue-router引入 第二步，将所有你需要使用路由跳转的页面引入 第三步，使用路由 第四步，定义一个router将路径、名称、组件名存入 第五步，记得将路由导出，这样main.js中才能导入 最后，在main.js中进行导入，在对应页面就可以用router-link进行路由选择了 使用方法： 在对应页面使用r
router-link 自定义点击事件
weixin_33924220的博客
09-25 703
&lt;li v-for="(item, index) in menuList"&gt; &lt;router-link class="classify" tag="div" :to="{path: item.listLink}" @click.native="clkTag(index)"&gt; &lt;!-- 默认 event="clic
解决使用vue.js路由后失效的问题
11-29
新学了vue.js中的路由 在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一...
Vue 解决父组件跳转子路由后当前导航active样式消失问题
11-20
举个栗子，导航栏如下图，当前新闻资讯的路由是：....router-link-exact-active{ color: #8fc526!important; border-top: 4px solid #8fc526!important; } router.js代码： { path: '/new', name: 'new', compon
TL-WR720N模式切换方法及各个模式设置指南.docx
09-08
TP-LINK的TL-WR720N是一款迷你型3G无线路由器，它的主要功能是将3G网络转化为Wi-Fi信号，便于各种智能设备共享无线网络。这款路由器设计精巧，具备三种主要工作模式：无线AP模式、3G路由模式和无线路由模式。 1. **...
H3C SR8800路由器-可靠性配置手册.pdf
10-12
- **图形界面格式约定**：对于图形化配置界面，书中给出了按钮、菜单和数据表的表示方法。 - **各类标志**：通过特定的图标和文字提醒，强调了操作的安全性、重要性或提示操作技巧。 **图标约定**： - 不同的图标...
vue路由 无法给router-link添加点击等事件的解决方案
wang_9909的博客
10-26 741
我们在开发过程中有时需要给router-link 标签添加事件如@click 、@mouseover。 譬如v-for遍历选项卡时设置点击事件 <div class="nav" > <router-link v-for="item in routes" :key="item.id" v-text="item.text" :to="item.path" :class="{ on: navName == item.text }" ...
router-link设置为不能点击
源码好优多
04-08 1万+
有个时候我们需要选中数据才能跳转页面就得把router-link设置为不能点击 解决办法 直接给按钮button设置个属性 disabled 给个事件比如 xx() { this.$router.push({ path: '/Add-Portal' }) }, 其他 关于传参 router.push({ name: 'user', params: { use...
router-link加上点击事件
公z号：职场爱学习
06-23 3008
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
通过vue router-link 点击事件请求
dazhi1770的博客
09-11 224
<span>用户登陆</span> </div> <formaction="https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey"method="post"&g...
Vue router-link点击事件不生效
qq_39863541的博客
08-22 1385
在学习路由时，想给<router-link>加个点击事件，结果发现不生效，百度之后问题解决 贴个代码： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>命名视图</title> ...
2024最全前端面试系列（数据结构篇）（大厂必考算法）
youpccc的博客
03-29 996
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
vue指令修饰符
weixin_68658847的博客
12-28 555
vue指令修饰符
Vue学习笔记
weixin_43887870的博客
08-05 1237
VUE 插值操作 mustache语法（双大括号） 指令：v-one 作用：插值操作只执行一次，后续发生值发生变化，显示不变。 指令：v-html 作用：将语句内容转为HTML格式输出 <div id="app"> <h2 v-html="a"></h2> </div> <script> const vue = new Vue({ el: '#app', data:{
使router-link失效
08-11
引用中给出了一种使用`router-link`的示例代码以及相应的样式设置。这段代码中的`router-link`标签用于跳转到不同的路由，并通过在`router-link`标签内部添加`span`标签来改变文字的样式。此外，通过在样式中指定`.active span`的颜色属性，可以改变被激活的链接的文字颜色。 引用提供了另一种给`router-link`添加样式的方式，即使用`exact-active-class`属性。可以在`router-link`标签内部添加`exact-active-class`属性，并设置对应的样式类名，实现激活链接的样式改变。 然而，引用中指出在Vue3中使用`exact-active-class`属性已经失效，因为Vue3的`router-link`样式设置方式发生了改变。在Vue3中，可以使用`router-link`的`active-class`和`exact`属性来设置链接的激活样式。根据路由路径是否精确匹配来设置CSS类名。 所以，要使`router-link`失效，你可以通过更改路由的路径或者在`router-link`标签中添加`exact`属性来实现。具体的代码和样式设置根据你的需求而定。123 #### 引用[.reference_title] - *1* *2* *3* [技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效](https://blog.csdn.net/yangyangdt/article/details/122324830)[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^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值