Vue ＜router-link＞标签绑定@click点击事件失败

最新推荐文章于 2024-07-05 09:04:11 发布
原创 最新推荐文章于 2024-07-05 09:04:11 发布 · 5.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

在 Vue.js 应用中使用 Vue Router 的时候，`router-link` 组件默认会阻止点击事件。若需绑定点击事件，需在 `@click` 后添加 `native` 修饰符。例如：`<router-link to=/home @click.native=changeRoute('home')>首页</router-link>`。这样可以确保点击事件正常触发。

失败原因

router-link标签本身会阻止click事件，使用常规的@click绑定点击事件自然会失败。

解决方案

@click之后添加native修饰符。

<router-link to="/home" @click.native="changeRoute('home')">
    首页
</router-link>
49. VUE router-link 标签的属性讲解 和 不通过router-link 实现路由跳转
Bi-Hu的博客
08-12 1334
1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签 ，那么我们就可以 tag 属性 ，可以自定义渲染成自己想要的组件： 可以发现 a 标签渲染成了 按钮。 2.replace属性 我们发现 你点击了router-link 标签 然后跳转切换视图的时候，他默认保留历史的 即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...
解决Vue router-link绑定事件不生效的问题
10-15
<router-link to="/date" @click.native="nav_click">最新</router-link> ``` 在这里，我们使用了@click.native来修饰click事件，这样click事件就会按照原生的事件进行处理，当点击router-link时，就会触发组件内的...
如何阻止跳转路由冒泡事件
weixin_51464636的博客
08-09 529
当div被router-link包裹，但div中有点击事件时。
给router-link绑定了click事件
Kwoky的博客
01-18 3158
使用.native修饰符 绑定原生事件 <router-link v-on:click.native="doSomethingCool" to="/">Home</router-link> 或者 <router-link to="/"> <span v-on:click="doSomethingCool">Home</span&...
Vue 路由的使用及解决 router-link 点击事件无效问题
My_wife_QBL的博客
07-05 2070
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
vue @click 在router-link 里面失效的问题的【已解决】
qq_43606316的博客
11-27 521
直接写@click 点击router-link getshow() 方法不执行 改成@click.native 后 getshow()执行 亲测有效
router-link绑定事件
天空影
04-28 1990
router-link上常规添加@click 事件是失效的，比如下面的jump() 就不能被执行 &lt;template&gt; &lt;div id="app"&gt; &lt;h1&gt;hello app!&lt;/h1&gt; &lt;p&gt; &lt;router-link to='/page1' &gt;pa
vue中＜router-link＞＜/router-link＞添加点击事件
fanyanjiang的博客
08-07 3507
点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。 在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 解决方案： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 所以如果在想要在router-link上添加事件的话需要@clic
<template> <div class="home"> <div class="search-box"> <input v-model="inpValue" type="text" /> <button @click="goSearch">搜索一下</button> </div> <div class="hot-link"> 热门搜索： <!-- 查询参数传参跳转 <router-link to="/search?key=热点资讯1">热点资讯1</router-link> <router-link to="/search?key=热点资讯2">热点资讯2</router-link> <router-link to="/search?key=热点资讯3">热点资讯3</router-link> --> <!-- 动态路由传参跳转 --> <router-link to="/search/热点资讯1">热点资讯1</router-link> <router-link to="/search/热点资讯2">热点资讯2</router-link> <router-link to="/search/热点资讯3">热点资讯3</router-link> </div> </div> </template> <script> export default { name: 'Home', data() { return { inpValue: '' } }, methods: { goSearch() { this.$router.push({ name: 'search', params: { words: this.inpValue } }) } } } </script> <style> .search-box { display: flex; justify-content: center; } .search-box input { width: 400px; height: 30px; line-height: 30px; border: 2px solid #c4c7ce; border-radius: 4px 0 0 4px; outline: none; } .search-box input:focus { border: 2px solid #ad2a26; } .search-box button { width: 100px; height: 36px; border: none; background-color: #ad2a26; color: #fff; position: relative; left: -2px; border-radius: 0 4px 4px 0; } .hot-link { width: 508px; height: 60px; line-height: 60px; margin: 0 auto; } .hot-link a { margin: 0 5px; } </style> 转化为vue3的写法
最新发布
06-21
--因此，我们可以去掉exact属性，因为VueRouter4会自动处理匹配--><router-linkto="/"exact-active-class="router-link-exact-active">Home</router-link><router-linkto="/about">About</router-link></div></...
<template> <header class="app-header"> <div class="header-content"> <div class="logo"> <img src="@/assets/logo.png" alt="Logo"> <h1>学习路径规划系统</h1> </div> <nav class="main-nav"> <router-link to="/dashboard">仪表盘</router-link> <router-link to="/learning-path">学习路径</router-link> <router-link to="/learning-resources">学习资源</router-link> <router-link to="/analysis">学习分析</router-link> <router-link to="/reports">报告生成</router-link> <!-- 动态显示用户相关链接 --> <div v-if="isLoggedIn" class="user-menu"> <router-link to="/profile">个人资料</router-link> <button @click="$emit('logout')">退出登录</button> </div> <div v-else class="auth-links"> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> </div> </nav> </div> </header> </template> <script> import { mapState, mapGetters } from 'vuex'; export default { name: 'Header', computed: { ...mapState(['user']), ...mapGetters(['isLoggedIn']) } }; </script> <style scoped> .app-header { background-color: #2c3e50; color: white; padding: 10px 20px; } .header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; color: white; text-decoration: none; } .logo img { height: 40px; margin-right: 15px; } .main-nav { display: flex; gap: 20px; align-items: center; } .main-nav a { color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s ease; } .main-nav a:hover { opacity: 0.8; } .user-menu { display: flex; gap: 15px; align-items: center; } .user-menu a { color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s ease; } .user-menu button { background: none; border: none; color: white; font-weight: bold; cursor: pointer; font-size: 16px; } .user-menu button:hover { opacity: 0.8; } </style>将上面代码转换为<script setup>格式
05-20
<router-link to="/learning-resources">学习资源</router-link> <router-link to="/analysis">学习分析</router-link> <router-link to="/reports">报告生成</router-link> <!-- 动态显示用户相关链接 --> ...
<template> <div id="app"> <!-- header --> <mt-header :title="$route.meta.title"> <router-link to="/" @click="goBack" slot="left" v-show="flag"> <mt-button icon="返回"><span style="margin-right: 3px;">＜</span>返回</mt-button> </router-link> </mt-header> <!-- content --> <router-view></router-view> <!-- tabber --> <tab-bar></tab-bar> </div> </template>
06-03
需要注意的是，模板中使用了Mint UI组件库的`<mt-header>`和`<mt-button>`组件，还有Vue.js的`<router-link>`和`<router-view>`组件。另外，模板中还有一个自定义的`<tab-bar>`组件，它需要在父组件中进行注册。
用router.push而不是用<router-view></router-view>跳转页面
04-27
比如，在首页提供一些固定的链接供用户点击访问其他功能模块（这可以通过 `<router-link>` 实现），而具体显示哪个模块则由 `<router-view>` 来决定；与此同时，如果某些特殊情况下需要程序内部主动发起页面转换，则...
elementUi的Dropdown下拉菜单通过@click绑定无效和Vue中的@click.native使用
qq_46580571的博客
04-30 676
Vue中的@click.native使用
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 3115
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
vue router-link 添加点击事件
u011280778的博客
09-04 3349
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡， 鼠标移上去出现删除标签，移除标签消失的效果 原代码： <router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseove...
router-link添加点击事件
THINK_OF_的博客
09-19 6251
&lt;router-link @click.native="doSomething" to="/a" &gt;&lt;/router-link&gt; 这样既可以跳转，点击事件也可以执行，做tab切换的时候可以用
VUE ROUTER-LINK 上添加点击事件
飞翔的熊blabla
10-05 1045
转载于 :https://www.cnblogs.com/xianhuiwang/p/6726688.html 在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况 我想要做的是v-for遍历出来的选项卡， 鼠标移上去出现删除标签，移除标签消失的效果 原代码： <router-link v-for="(item, index...
Vue开发时router-link无法绑定点击事件的解决方案
qq_17285877的博客
07-16 544
Vue开发时router-link无法绑定点击事件的解决方案问题描述解决方案 问题描述 在使用router-link时，想要实现点击时更改一个变量的值。然而点击事件并没有被触发。经上网查询，发现给组件直接绑定事件是有问题的，因为组件无法辨认我们写的@click是不是子组件通过emit触发的自定义事件。 解决方案 将@click="js代码"修改为@click.native="js代码"即可。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值