vue中＜router-link＞＜/router-link＞添加点击事件

已于 2023-08-30 18:07:19 修改
阅读量2.5k 收藏 2
点赞数
文章标签： vue
于 2020-08-07 09:39:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanyanjiang/article/details/107855333
版权

点击事件失败原因：

router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。

在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况

解决方案：

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

所以如果在想要在router-link上添加事件的话需要@click.native这样写

<router-link @click.native=''></router-link>
fanyanjiang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue router-link绑定事件不生效的问题
10-15
主要介绍了解决Vue router-link绑定事件不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue-router 2.0 常用基础知识点之router-link
12-09
前端采用前后端分离的方式进行开发，我们使用vue2.0框架，做单页面应用难免会用到vue-router，今天把项目中的用到router-link摘出来，一是想整理一下这些用法，方便下次快速查找，二是重新再过一下vue-router，增加熟悉度。也希望下面这些例子能帮到其他使用vue-router的朋友。 1，$route.params 类型: Object 一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。 path: ‘/detail/:id’ 动态路径参数 以冒号开头 const routes = [ {path: '/detai
详解vue中router-link标签所必备了解的属性
10-17
主要介绍了vue中router-link标签所必备了解的属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue router-link 默认a标签去除下划线的实现
01-18
我就废话不多说了，大家还是直接看例子吧~ .router-link-active{ text-decoration: none; } vue的router-link默认的a标签点击会有一个阴影 补充知识：vue-router更改router-link点击时样式 默认类：router-link-active：可以通过在样式表中重新定义 基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/ 以上这篇vue router-link 默认a标签去除下划线的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网
详谈vue中router-link和传统a链接的区别
10-15
主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
router-link加click事件
weixin_30603633的博客
04-02 3188
在router-link上添加click事件会被拦截无效，需要加.native修饰符 即 <router-link @click.native="change(id)" to=""></router-link> 知识点：将原生事件绑定到组件 传送门 作用：在一个组件的根元素上直接监听一个原生事件 转载于:https://www.cnblogs.com/...
Vue 的router-link 标签添加事件
Jay的博客
01-18 2688
前言 在vue 的开发中，对router -link 的使用是不可避免的。有时候，我们需要对router-link 添加事件。正好，前段时间，我就遇到这样的需求。当我写下以下代码时，无论我怎么点都没有反应。 <router-link @click="isFinish()">link</router-link> 最后，百度了才知道，必须给事件添加修饰符.native 事...
Vue中的router-link路由页面跳转绑定的@click事件不能触发以及解决办法
weixin_46419373的博客
04-23 6453
在很多的电商项目当中，都会有底部导航的切换，需要用到点击事件，在这里，我用的是Vue的框架来说明。 1、这里是@click的用法(这是在组件中的写法) <template> <div> <router-view /><!-- 路由中用来展示的 --> <div class="xps_footer"> <router...
vue指令修饰符
weixin_68658847的博客
12-28 535
vue指令修饰符
vue router-link 添加点击事件
u011280778的博客
09-04 3159
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡， 鼠标移上去出现删除标签，移除标签消失的效果 原代码： <router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseove...
如何在router-link中绑定click、keyup、change等事件？
weixin_34270606的博客
08-05 355
最近在利用vue做博客的时候，发现了一个小问题，正常情况下，我们是无法在<router-link>中绑定click等事件的，就算绑定了，那也会被触发，下面也是从网上百度的解决方案如下： <router-link :to="{name:'Home'}" @click.native="tabClick"></ro...
vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件
热门推荐
Wbiokr的博客
08-16 1万+
<template> <div id="app"> <h1>hello app!</h1> <p> <router-link to='/page1' tag='a'>page1</router-link> <router-link to='/page1/page2' tag='a' @click='jump' >p
原创~vue router-link添加点击事件
weixin_34187862的博客
02-26 192
在学习vue中会遇到给router-link添加@click，@mouseover等事件 我想要做的是用v-for循环输出导航菜单，但是下面代码的@click事件和@mouseover并不会响应 <router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path}" @click="change...
vue路由的使用以及如何解决在router-link上添加点击事件无效的情况
Maximum_Patrick的博客
12-18 1831
vue路由的使用以及如何解决在router-link上添加点击事件无效的情况 一、vue路由的使用 首先要去npm商店下载安装vue-router，安装好之后新建router.js文件将vue-router引入 第二步，将所有你需要使用路由跳转的页面引入 第三步，使用路由 第四步，定义一个router将路径、名称、组件名存入 第五步，记得将路由导出，这样main.js中才能导入 最后，在main.js中进行导入，在对应页面就可以用router-link进行路由选择了 使用方法： 在对应页面使用r
router-link加上点击事件
公z号：职场爱学习
06-23 3003
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
Vue学习笔记
weixin_43887870的博客
08-05 1225
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时候会发生什么？
思索的涟漪，突破自我
10-03 1123
会触发Vue Router的导航流程，这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作，最终将目标组件渲染到页面中。: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配，以确定最终前往哪个路由。: 如果一切正常，Vue Router将根据匹配到的目标路由，执行页面的切换操作。: Vue Router会拦截这个点击事件，阻止浏览器默认的页面跳转。），Vue Router会依次执行这些操作，以决定是否允许导航。属性，这个属性指定了目标路由的路径或命名路由。
vue router-link 上添加点击事件
sanstu的博客
07-24 3143
在vue学习中遇到给router-link添加点击事件无效的情况。 例如： 发现事件没有执行，后根据vue的官方文档得知想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on 例如： 这样就可以啦！ 学习笔记，如有不足请多指教！
关于给router-link添加点击事件失效的解决方法
weixin_46212682的博客
03-28 1844
在router-link标签中，仅仅用于路由的切换，而router-link会阻止其他的点击事件的存在，加上native的作用是：给组件绑定原生事件 <router-link to="/" @click.native="muenSwitch(index)"> 首页 </router-link> 这样你就可以点击到相应的事件了 ...
<router-link>
最新发布
01-27
<router-link>是Vue.js中的一个组件，用于实现路由导航功能。它可以将用户点击的链接转换为对应的路由地址，并进行页面的跳转。 以下是两个使用<router-link>的例子： 1. 使用字符串作为to属性： ```html <router-link to="/home">home</router-link> ``` 这个例子中，点击"home"链接会跳转到"/home"路由地址。 2. 使用动态绑定的对象作为to属性，并在<router-link>中添加其他标签： ```html <router-link :to="{name:'Home'}" tag="li"> <a>Home</a> </router-link> ``` 这个例子中，点击"a"标签会跳转到名为"Home"的路由地址，并且<router-link>会被渲染成一个"li"标签。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值