在router-link渲染出来的标签上监听click事件

最新推荐文章于 2024-07-05 09:04:11 发布
最新推荐文章于 2024-07-05 09:04:11 发布
阅读量1.2k 收藏
点赞数

//<router-link>渲染出来就是标签了，上面绑定的click=jump就没有了，
//能不能在渲染出来的标签上面监听事件呢？ 
//想在<router-link>渲染出来的标签上监听click事件怎么办？
<router-link to='/page1/page2' tag='a' @click.native='jump' >page2</router-link>

//在事件后添加修饰符native即可解决

裙带菜
关注
vue-router实现路由变更监听
weixin_45802744的博客
08-08 2048
用户点击链接元素： 户点击链接交互，即点击了<router-link> props: { tag: { type: String, default: 'a' }, // 绑定的事件 event: { type: eventTypes, default: 'click' } }, render (h: Function) { const handler = e => { .
Vue -- router-link(传参)
bobobocai的博客
12-14 2026
<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5 history 模式还是
router-link加上点击事件
公z号：职场爱学习
06-23 3049
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
router-link添加点击事件
THINK_OF_的博客
09-19 6139
&lt;router-link @click.native="doSomething" to="/a" &gt;&lt;/router-link&gt; 这样既可以跳转，点击事件也可以执行，做tab切换的时候可以用
vue中＜router-link＞＜/router-link＞添加点击事件
fanyanjiang的博客
08-07 3109
点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。 在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 解决方案： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@clic
vue 的 router-link 添加点击事件
肖的博客
11-21 3331
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@click.native这样写 ...
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
在渲染时，Vue Router 会将 `<router-link>` 组件转换为一个实际的 HTML 链接，同时添加 `v-on:click` 事件监听器。当点击事件触发时，执行内部定义的 `handler` 函数，从而实现路由的平滑跳转。 **2. `<router-...
vue-router使用笔记——监听路由变化的方法
qq_43115213的博客
08-26 2292
监听路由变化的方法 1.watch 需要注意的是，只能监听到子路由的改变。 Person.vue <template> <div id="person"> <h1 @click="toMain">个人中心</h1> <p>这里是个人中心，欢迎访问个人相关信息</p> <router-link to="/person/user">用户信息</router-link> &lt
vue按钮高亮，添加类，点击高亮，路由router高亮linkExactActiveClass（多种方法实现）...
weixin_41105030的博客
03-17 4749
vue样式高亮 refs来高亮 directives link-router-active router一般会给个类 使用watch 结合路由路径
<ul> <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> <router-link :to="item.path" class="tags-li-title"> {{item.title}} </router-link> <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> </li> </ul>
06-02
这段代码是什么意思？ 这是一个 Vue.js 组件的代码，它渲染了一个标签列表。...- 使用了 @click 事件监听器，当用户点击关闭按钮时，调用 closeTags 方法，该方法传入当前标签的索引值，从而删除该标签。
Vue 路由的使用及解决 router-link 点击事件无效问题
My_wife_QBL的博客
07-05 1041
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
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
点击router-link时候会发生什么？
思索的涟漪，突破自我
10-03 1359
会触发Vue Router的导航流程，这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作，最终将目标组件渲染到页面中。: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配，以确定最终前往哪个路由。: 如果一切正常，Vue Router将根据匹配到的目标路由，执行页面的切换操作。: Vue Router会拦截这个点击事件，阻止浏览器默认的页面跳转。），Vue Router会依次执行这些操作，以决定是否允许导航。属性，这个属性指定了目标路由的路径或命名路由。
router-link绑定点击事件失效
weixin_43915587的博客
04-27 1953
router-link 绑定事件不生效 在vue中绑定事件是一下这种方法： v-on:click=‘函数名称’; @click = ‘函数名称’; 这两种写法都是正常。 但是我们使用了 vue-router 路由时会使用 标签来代替 a 标签跳转。我们在 vue-router 标签绑定 @click 事件 。 <router-link to="/date" @click="nav_clic...
Vue-router 中 hash 和 html5 两种路由监听方式
weixin_43443341的博客
12-15 1940
如果你用过 Vue，那你一定知道 vue-router，它给开发者提供了两种路由方式。这两种不同模式的路由方式，它们对路由的监听方式也不同。
Vue中的router-link路由页面跳转绑定的@click事件不能触发以及解决办法
weixin_46419373的博客
04-23 6675
在很多的电商项目当中，都会有底部导航的切换，需要用到点击事件，在这里，我用的是Vue的框架来说明。 1、这里是@click的用法(这是在组件中的写法) <template> <div> <router-view /><!-- 路由中用来展示的 --> <div class="xps_footer"> <router...
一个开源的Vue大屏数据展示组件库(1)
2401_84447233的博客
05-01 554
数据尚未加载完成时，可以显示Loading效果，增强用户体验。Loading…边框均由SVG元素绘制，体积轻量不失真，使用极为方便。你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。66%基本示例设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。增强版飞线图。
vue路由跳转监听
业余前端爱好者
09-24 1576
vue路由跳转监听
vue的router—link底层原理vue的router—link底层原理
最新发布
07-18
Vue Router 的 `<router-link>` 组件实际上是通过 Vue 的 `v-once`、`v-bind` 和 `vue-router` 提供的 `$router` 对象来工作的。当用户点击 `<router-link>` 时，它会做以下几件事： 1. **HTML绑定**：`<router-link>` 元素会被数据驱动地绑定到当前路由的路径（`to` 属性），这会在渲染时创建一个链接。 2. **v-once渲染**：由于 `v-once` 指令的存在，`<router-link>` 只会在首次渲染时插入 DOM，并保留为静态元素。这意味着对于已导航到的新路由，对应的链接不会再次重新渲染，提高了性能。 3. **事件监听**：实际上，点击事件并不是直接绑定到 `<router-link>` 上，而是绑定了到 `<a>` 标签上。当用户点击时，触发的 `click` 事件会通过 Vue 实例内部传递给路由处理器，进行路由跳转。 4. **路由更新**：事件处理函数会检测目标 URL 是否与当前路由匹配，如果不匹配，则调用 `$router.push()` 或 `$router.replace()` 方法进行路由切换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值