在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 2015
用户点击链接元素： 户点击链接交互，即点击了<router-link> props: { tag: { type: String, default: 'a' }, // 绑定的事件 event: { type: eventTypes, default: 'click' } }, render (h: Function) { const handler = e => { .
router-link八种属性介绍
qq_28134589的博客
08-05 1335
router-link组件的属性有： to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class 1 to <router-link :to="{name:'home',query:{kkk:'5555'}}">home页</router-link> <router-link to="home">Home</router-link> <router-link :
router-link加上点击事件
公z号：职场爱学习
06-23 3033
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
Vue 路由的使用及解决 router-link 点击事件无效问题
My_wife_QBL的博客
07-05 722
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
router-link添加点击事件
THINK_OF_的博客
09-19 6111
&lt;router-link @click.native="doSomething" to="/a" &gt;&lt;/router-link&gt; 这样既可以跳转，点击事件也可以执行，做tab切换的时候可以用
vue中＜router-link＞＜/router-link＞添加点击事件
fanyanjiang的博客
08-07 2993
点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。 在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 解决方案： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@clic
vue 的 router-link 添加点击事件
肖的博客
11-21 3316
根据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-link(传参)
bobobocai的博客
12-14 2007
<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5 history 模式还是
链接（跳转）<router-link> 和 路由实例Router
weixin_30387423的博客
08-03 1027
<router-link>和<router-link>传入的对象参数中包含path路径、name命名路由、params路径参数、query ？查询，并且如果提供了 path，params 会被忽略 <router-link> <router-link> 比起写死的 <a href="..."> 会好一些 无论是 HTML5 his...
vue-router使用笔记——监听路由变化的方法
qq_43115213的博客
08-26 2261
监听路由变化的方法 1.watch 需要注意的是，只能监听到子路由的改变。 Person.vue <template> <div id="person"> <h1 @click="toMain">个人中心</h1> <p>这里是个人中心，欢迎访问个人相关信息</p> <router-link to="/person/user">用户信息</router-link> &lt
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 1313
会触发Vue Router的导航流程，这个过程包括了路由匹配、权限验证、钩子函数的执行等一系列操作，最终将目标组件渲染到页面中。: Vue Router会将解析得到的目标路由与路由配置中的规则进行匹配，以确定最终前往哪个路由。: 如果一切正常，Vue Router将根据匹配到的目标路由，执行页面的切换操作。: Vue Router会拦截这个点击事件，阻止浏览器默认的页面跳转。），Vue Router会依次执行这些操作，以决定是否允许导航。属性，这个属性指定了目标路由的路径或命名路由。
router-link绑定点击事件失效
weixin_43915587的博客
04-27 1935
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 1883
如果你用过 Vue，那你一定知道 vue-router，它给开发者提供了两种路由方式。这两种不同模式的路由方式，它们对路由的监听方式也不同。
Vue中的router-link路由页面跳转绑定的@click事件不能触发以及解决办法
weixin_46419373的博客
04-23 6638
在很多的电商项目当中，都会有底部导航的切换，需要用到点击事件，在这里，我用的是Vue的框架来说明。 1、这里是@click的用法(这是在组件中的写法) <template> <div> <router-view /><!-- 路由中用来展示的 --> <div class="xps_footer"> <router...
vue路由跳转监听
业余前端爱好者
09-24 1558
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、付费专栏及课程。

余额充值