router-link上添加点击事件无效

最新推荐文章于 2024-07-05 09:04:11 发布

原创最新推荐文章于 2024-07-05 09:04:11 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue中，<router-link>组件会默认拦截点击事件以避免页面刷新。若要在<router-link>上添加原生点击事件，如mouseover等，可以通过添加.native修饰符来实现。

`在<router-link @mouseover="">上我们添加点击事件总是无效的，这是因为<router-link>在HTML5历史记录模式下，router-link将拦截点击事件，以便浏览器不会尝试重新加载页面。`

但如果想要添加点击事件怎么办呢？ Vue 给出了一种解决办法，在事件上加上修饰符 “.native”，示例如下：

<router-link @mouseover.native="">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

catchRun

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？

BubbleABC的博客

06-26

1078

为什么我的router-link跳转时浏览器的路径是正确的，而router-view却……为什么不渲染数据？？？这个问题我纠结了好几个小时。。到最后，真真真……（无语子）先上图，看目录：我的目录长这样接下来我会用到这几个页面： 1，HelowWorld.vue页面（上代码）： <template> <div class="hello"> 你好你好你好 <h1>这里是HelloWorld</h1> <p>

vue 嵌套路由，router-link-active的问题

Missbelover的博客

11-17

2128

效果在点击主路由的时候，会有一个active的样式但是在点击了子路由之后：一开始我是用vue里面router-link-exact-active来做的在子路由点击的时候，要保证此时当前的激活路由还处于active状态，显然如果用router-link-exact-active 来做的话，就不能实现了。即在你点击子路由的时候，主路由的active样式就消失了， router-link-...

参与评论您还未登录，请先登录后发表或查看评论

vue router-link添加点击事件无效

HELLO WORLD

05-27

3322

本文知识点比较简单，只要面向新人解惑，vue高手请忽略。在vue实际开发中可能会遇到比较常见的问题之一：router-link添加点击事件无效。这是为什么呢？请看下文

router-link 点击事件失效

曹曹的博客

07-24

2925

router-link会阻止click事件（只用@click不用@click.native,事件是不会触发的) //以下addUserName点击函数无效 <router-link to="/Home" @click="addUserName">Go to the Home</router-link> 解决方法:将@click改为@click.native //...

router-link在安卓机上没有反应处理方案

weixin_43837268的博客

03-22

2556

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

router-link中点击事件失效

qq_40239859的博客

06-21

877

可以在click后面加上native，即把@click变成@click.native，点击事件又重新生效了。

Vue 路由的使用及解决 router-link 点击事件无效问题

My_wife_QBL的博客

07-05

2062

在routes: [path: '/',},});Vue Router 是 Vue.js 官方的路由管理器，它提供了丰富的功能来构建单页面应用。通过定义路由、创建路由实例、挂载路由实例以及在模板中使用和，我们可以轻松实现页面导航和视图切换。在上添加点击事件时，可以使用.native修饰符监听原生点击事件，或者使用@click监听点击事件并调用阻止默认行为，然后手动执行路由跳转。希望本文能够帮助你全面理解 Vue Router 的使用方法，并解决在上添加点击事件无效的问题。

解决Vue router-link绑定事件不生效的问题

10-15

在这里，我们使用了@click.native来修饰click事件，这样click事件就会按照原生的事件进行处理，当点击router-link时，就会触发组件内的nav_click方法。解释这一点时，需要注意的是，虽然router-link看起来是一个...

vue2中阻止router-link的默认跳转

最新发布

05-11

1. 在router-link上添加@click.native.prevent事件监听，阻止默认行为。 2. 在处理方法中执行自定义操作，如弹窗确认，再决定是否跳转。 3. 如果需要条件性跳转，可以使用$router.push或replace方法手动导航。需要...

router-link的to跳转404

04-22

<router-link to="/notfoundpage">无效链接测试</router-link> <router-view/> export default { name: 'App' }; /* ... */ ``` 其中需要注意的是绑定对象形式下的命名路由调用方式以及如何优雅地...

vue router-link点击事件失效 - Kaiqisan

Kaiqisan的博客

09-15

1666

简答ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである , 今天解决一个忘记很久的一个问题，今天又重新遇到了，就顺便讲掉。 vue router-link点击事件失效简答这样不行 <router-link to="/app" @click="doClick"> 点击跳转 </router-link> 这样行 <router-link to="/app" @click.native="doClick"> 点击跳转 </ro

vue路由的使用以及如何解决在router-link上添加点击事件无效的情况

Maximum_Patrick的博客

12-18

2094

vue路由的使用以及如何解决在router-link上添加点击事件无效的情况一、vue路由的使用首先要去npm商店下载安装vue-router，安装好之后新建router.js文件将vue-router引入第二步，将所有你需要使用路由跳转的页面引入第三步，使用路由第四步，定义一个router将路径、名称、组件名存入第五步，记得将路由导出，这样main.js中才能导入最后，在main.js中进行导入，在对应页面就可以用router-link进行路由选择了使用方法：在对应页面使用r

使用router-link跳转子页面之后，菜单激活样式不生效的解决

qq_49074952的博客

08-10

1009

使用router-link跳转子页面之后，菜单激活样式不生效的解决

VUE router-link添加mouseover提示

ckg的博客

09-18

895

直接上代码： <router-link :to="item.path" class="tags-li-title"> <el-popover trigger="hover" placement="top"> <p>{{ item.title }}</p> <div slot="reference">...

VUE ROUTER-LINK 上添加点击事件

热门推荐

小猪奋斗

02-26

1万+

点击事件失败原因：router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况解决方案：根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click

vue常见bug

donglingyan的博客

04-09

230

使用@click.native:router-link会阻止click事件，.native指直接监听一个原生事件。vue路由在Android机上有问题（babel问题）：安装babel polypill插件。2.使用button标签和Router.navigate方法；3.如果赋值页面数据没有刷新，可以用v-if。1.只用a标签，不适合用button标签；安装动态懒加载所需插件；2.如果没有彻底解决：在根元素上加上。

vue中＜router-link＞＜/router-link＞添加点击事件

fanyanjiang的博客

08-07

3506

点击事件失败原因： router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况解决方案：根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。所以如果在想要在router-link上添加事件的话需要@clic

vue router 中 router-link 不起作用的问题

chunyanquan1444的博客

02-27

6974

今天看了下 vue router 的文档，自己写了个小 demo，代码如下 <html> <head> <script src="https://unpkg.com/vue/dist/vue.js"></script> <...

vue-必备知识点，2024年最新腾讯Web前端开发面试经验

weixin_58134620的博客

04-10

956

答：使用vue开发时，在vue初始化之前，由于 div 是不归 vue 管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于 {{message}} 的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。：在beforeMount阶段，vue实例的 $el 和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

router-link上 添加 点击事件 无效

在<router-link @mouseover="">上我们添加点击事件总是无效的，这是因为<router-link>在HTML5历史记录模式下，router-link将拦截点击事件，以便浏览器不会尝试重新加载页面。

router-link上添加点击事件无效

`在<router-link @mouseover="">上我们添加点击事件总是无效的，这是因为<router-link>在HTML5历史记录模式下，router-link将拦截点击事件，以便浏览器不会尝试重新加载页面。`