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>
解决Vue router-link绑定事件不生效的问题
10-15
<router-link to="/date" @click.native="nav_click">最新</router-link> ``` 在这里，我们使用了@click.native来修饰click事件，这样click事件就会按照原生的事件进行处理，当点击router-link时，就会触发组件内的...
给router-link绑定了click事件
Kwoky的博客
01-18 3115
使用.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 1981
在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。
vue @click 在router-link 里面失效的问题的【已解决】
qq_43606316的博客
11-27 515
直接写@click 点击router-link getshow() 方法不执行 改成@click.native 后 getshow()执行 亲测有效
router-link绑定事件
天空影
04-28 1986
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 3490
点击事件失败原因： 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> <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>` 来决定；与此同时，如果某些特殊情况下需要程序内部主动发起页面转换，则...
<template> <nav class="sidebar"> <ul> <li><router-link to="/">首页</router-link></li> <li><router-link to="/about">关于</router-link></li> <li><router-link to="/user">用户</router-link></li> <li><router-link to="/ai">DeepSeek-R1</router-link></li> <li><router-link to="/users111">用户111</router-link></li> </ul> </nav> </template> <script setup> </script> <style scoped> .sidebar { padding: 1rem; } .sidebar ul { list-style: none; padding: 0; } .sidebar li { margin: 10px 0; } .sidebar a { text-decoration: none; color: #2c3e50; font-weight: 500; } .sidebar a.router-link-active { color: #409EFF; font-weight: bold; } </style> 解释代码
最新发布
08-29
`@click` 是事件绑定指令，当按钮被点击时会触发 `addTodo` 方法。 ### `<script setup>` 代码块 `<script setup>` 是 Vue 3 引入的一种新的语法糖，用于更简洁地编写组件逻辑。在 `<script setup>` 中，可以直接...
elementUi的Dropdown下拉菜单通过@click绑定无效和Vue中的@click.native使用
qq_46580571的博客
04-30 668
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 3108
必须加上native。如果需要做比较特殊的功能，建议使用其它dom元素来实现。 <router-link @click.native="">
vue router-link 添加点击事件
u011280778的博客
09-04 3337
在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 6242
&lt;router-link @click.native="doSomething" to="/a" &gt;&lt;/router-link&gt; 这样既可以跳转，点击事件也可以执行，做tab切换的时候可以用
VUE ROUTER-LINK 上添加点击事件
飞翔的熊blabla
10-05 1044
转载于 :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 538
Vue开发时router-link无法绑定点击事件的解决方案问题描述解决方案 问题描述 在使用router-link时，想要实现点击时更改一个变量的值。然而点击事件并没有被触发。经上网查询，发现给组件直接绑定事件是有问题的，因为组件无法辨认我们写的@click是不是子组件通过emit触发的自定义事件。 解决方案 将@click="js代码"修改为@click.native="js代码"即可。 ...
Vue中的router-link路由页面跳转绑定的@click事件不能触发以及解决办法
weixin_46419373的博客
04-23 6868
在很多的电商项目当中，都会有底部导航的切换，需要用到点击事件，在这里，我用的是Vue的框架来说明。 1、这里是@click的用法(这是在组件中的写法) <template> <div> <router-view /><!-- 路由中用来展示的 --> <div class="xps_footer"> <router...
router-link中绑定点击事件无效
浅夏博客
01-18 419
想在点击登录按钮的同时切换路由以及发送请求。但是绑定点击事件时候却没有打印出我想要的数据。 其实只需要在点击事件后面加上.native就可以执行了 <router-link to="/home" @click.native="p">登录</router-link> </div> </div> </template> <script> export default { data(){ return
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值