vue router-link添加click事件无效

最新推荐文章于 2024-07-05 09:04:11 发布
最新推荐文章于 2024-07-05 09:04:11 发布
阅读量1k 收藏
点赞数
分类专栏： vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43422861/article/details/103450205
版权

原因：

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

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

解决方案：

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

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

Paul_Chan_
关注
专栏目录
Vue -- router-link(传参)
bobobocai的博客
12-14 2006
<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5 history 模式还是
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 6111
&lt;router-link @click.native="doSomething" to="/a" &gt;&lt;/router-link&gt; 这样既可以跳转，点击事件也可以执行，做tab切换的时候可以用
Vue 路由的使用及解决 router-link 点击事件无效问题
最新发布
My_wife_QBL的博客
07-05 704
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
vue中＜router-link＞＜/router-link＞添加点击事件
fanyanjiang的博客
08-07 2985
点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。 在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 解决方案： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@clic
router-link 自定义点击事件
weixin_33924220的博客
09-25 705
&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 router-link绑定事件不生效的问题
10-15
在这里，我们使用了@click.native来修饰click事件，这样click事件就会按照原生的事件进行处理，当点击router-link时，就会触发组件内的nav_click方法。 解释这一点时，需要注意的是，虽然router-link看起来是一个...
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
在渲染时，Vue Router 会将 `<router-link>` 组件转换为一个实际的 HTML 链接，同时添加 `v-on:click` 事件监听器。当点击事件触发时，执行内部定义的 `handler` 函数，从而实现路由的平滑跳转。 **2. `<router-...
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的实现代码 本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。 首先， Vue router-link 是 Vue.js...
点击router-link时候会发生什么？
思索的涟漪，突破自我
10-03 1309
会触发Vue Router的导航流程，这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作，最终将目标组件渲染到页面中。: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配，以确定最终前往哪个路由。: 如果一切正常，Vue Router将根据匹配到的目标路由，执行页面的切换操作。: Vue Router会拦截这个点击事件，阻止浏览器默认的页面跳转。），Vue Router会依次执行这些操作，以决定是否允许导航。属性，这个属性指定了目标路由的路径或命名路由。
vue router-link 上添加点击事件
sanstu的博客
07-24 3164
在vue学习中遇到给router-link添加点击事件无效的情况。 例如： 发现事件没有执行，后根据vue的官方文档得知想在某个组件的根元素上监听一个原生事件。可以使用.native修饰v-on 例如： 这样就可以啦！ 学习笔记，如有不足请多指教！
router-link加上点击事件
公z号：职场爱学习
06-23 3033
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
vue学习笔记二：vue-router如何在router-link标签绑定click点击事件
Fiona_lms的博客
04-09 3877
这几天给自己的一个移动端的项目，增加一个底部的导航栏，然后可以点击的时候，进行切换 代码如下： &lt;router-link :to="{name:'home'}" class="btn1" tag="a" @click.native='showFooterNav' &gt; &lt;img class="icon" src="../../static/img/foo
router-link加click事件
weixin_30603633的博客
04-02 3210
在router-link上添加click事件会被拦截无效，需要加.native修饰符 即 <router-link @click.native="change(id)" to=""></router-link> 知识点：将原生事件绑定到组件 传送门 作用：在一个组件的根元素上直接监听一个原生事件 转载于:https://www.cnblogs.com/...
Vue 的router-link 标签添加事件
Jay的博客
01-18 2749
前言 在vue 的开发中，对router -link 的使用是不可避免的。有时候，我们需要对router-link 添加事件。正好，前段时间，我就遇到这样的需求。当我写下以下代码时，无论我怎么点都没有反应。 <router-link @click="isFinish()">link</router-link> 最后，百度了才知道，必须给事件添加修饰符.native 事...
关于给router-link添加点击事件失效的解决方法
weixin_46212682的博客
03-28 1876
在router-link标签中，仅仅用于路由的切换，而router-link会阻止其他的点击事件的存在，加上native的作用是：给组件绑定原生事件 <router-link to="/" @click.native="muenSwitch(index)"> 首页 </router-link> 这样你就可以点击到相应的事件了 ...
vue router-link 添加点击事件
u011280778的博客
09-04 3217
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡， 鼠标移上去出现删除标签，移除标签消失的效果 原代码： <router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseove...
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用法
08-13
时，需要先导入Vue和VueRouter模块，然后在Vue实例中注册VueRouter，并在VueRouter实例中配置路由规则。最后，在Vue组件的模板中使用<router-link>来创建链接，并使用<router-view>来展示对应的组件内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值