路由跳转重复点击报错

最新推荐文章于 2023-09-25 11:48:58 发布
最新推荐文章于 2023-09-25 11:48:58 发布
阅读量475 收藏 2
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52371073/article/details/126222209
版权

在我们设置路由切换时重复点击报错的问题：

 解决办法：    

这是Vue-Router常见的问题，我们重复点击同一个路由会造成router延时，路由冗余，在点击事件结束后抛出一个catch即可

在每次路由点击后面加上如下：
this.$router.replace(this.path).catch(err=>err)

米彩_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
编程式路由跳转（push/replace）多次点击会报错问题
victorylip的博客
03-23 353
---前端小白记录学习中、工作中遇到的知识点。问题答案源自尚硅谷尚品汇项目。
vue2（路由3）编程式导航重复跳转同一路由报错解决
weixin_74285634的博客
06-26 1948
vue2（路由3）编程式导航重复跳转同一路由报错解决
vue监听路由变化时watch方法会执行多次的原因及解决
最新发布
qq_43086723的博客
09-25 3881
vue监听路由变化时watch方法会执行多次的原因及解决
vue路由点击事件跳转两次的bug
qq_43959639的博客
10-01 781
原因a标签没设置src="javascript:;"
同一个路由重复点击报错的解决方法
qq_26841153的博客
04-15 570
vue路由重复点击
vue相同路由跳转强制刷新该路由组件操作
10-14
然而，有时开发者可能会遇到一种情况，即在同一个路由下，需要在用户再次点击菜单时强制刷新组件，以确保组件的状态被重置。Vue Router，Vue.js的官方路由管理器，提供了一些策略来应对这种情况。 **强制刷新组件**...
路由技术解决页面跳转问题
01-19
　页面跳转路由技术，算来并不是一个很新的技术，但却是一项有用的技术。在网站有很多需要跳转的页面，而我们又需要动态地在主页面中加载子页面时，就会用到这门技术。以我们公司现在这个项目为例，前台是由FLEX实现...
vue.js路由跳转详解
10-19
主要为大家详细介绍了vue.js路由跳转的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
手写组件化框架路由跳转功能
10-31
而路由跳转是组件化框架中的关键功能，它允许不同组件之间进行通信和导航。本篇文章将深入探讨如何利用Apt、Javassist和ASM这三种不同的技术来实现组件化框架中的路由跳转功能。 首先，让我们了解一下Apt...
flutter 路由跳转的实现示例
08-24
本篇文章将深入探讨Flutter中的路由跳转及其实现示例，包括静态路由和动态路由，以及如何传递参数。 首先，Flutter的路由系统提供了一种简单的方法来处理页面之间的导航。你可以直接使用`Navigator`类的`push`方法...
解决vue路由跳转到同一页面的刷新问题
热门推荐
sinat_41200024的博客
03-18 1万+
问题描述：当我使用路由跳转页面时，如果页面跳转是同一个路由，传递的参数不同时，页面不刷新， 如下图：待收定金和待收首款其实跳转的是同一个组件 ，只是他们传递的参数不同而已。 当我使用路由进行跳转时，我发现第一次是可以正确跳转的，比如我当前在其他页面，当我点击一个“待收定金”他可以正常的跳转到指定组件去，此时当我再点击“待收首款”时，页面不刷新，还是之前的数据，查了很多资料也没找到合适的解决办法。...
3. Vue 编程式路由跳转多次点击报错问题
白怀宇的博客
06-21 1015
Vue 编程式路由跳转多次点击报错问题 概述 使用编程式路由进行跳转时，控制台报错，如下所示。 问题分析 该问题存在于Vue-router v3.0之后的版本，由于新加入的同一路径跳转错误异常功能导致。 解决方法 重写 $router.push 和 $router.replace 方法，添加异常处理。 //push const VueRouterPush = VueRouter.prototype.push VueRouter.prototype.push = function push (t
vue Element-ui row-click事件给当前页面路由加参数，不跳转，点击报错堆栈溢出Maximum call stack size exceeded
u011599033的博客
03-21 5703
row-click事件给当前页面路由加参数，不跳转，只要一点击报错堆栈溢出，很烦 vue-router.esm.js:1282 Uncaught RangeError: Maximum call stack size exceeded at RegExp.exec (<anonymous>) at RegExp.[Symbol.match] (<anonymous...
Element/vue router连续点击同一路由报错解决方法
银鞍照白马的博客
11-02 2070
写项目的时候，多次点击同一路由地址的时候，router会报错，错误如下： 网上查了一下，发现是因为router版本bug，需要升级router ，方法如下(亲测有效) ： 第一种方法，升级vue-router： 在项目目录下运行 npm i vue-router@3.0 -S 第二种方法，不升级vue-router，修改main.js // main.js import Router fro...
vue 路由重复点击报错
weixin_44286765的博客
06-23 124
const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); };
VueRouter解决重复点击导航路由报错,Router路由跳转错误
qq_40591925的博客
05-19 538
push方法： const originalPush = VueRouter.prototype.push // 修改 原型对象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err=>err) } replace方法： const originalReplace = VueRouter.prototype.r..
在vue中重复点击路由时报错
wk的博客
07-28 366
解决方法： 1.在router.js中添加下列代码 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 2.或者在加子路由时,前面可以带上父级路由 ...
解决重复点击导航路由报错
lifan12138的博客
11-13 644
解决重复点击导航路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) }
vue 解决重复点击导航路由报错
k250119101的博客
02-11 2333
import Router from ‘vue-router’ // 解决重复点击导航路由报错 const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err =>...
vue路由重复点击会报错
04-23
是的，这是因为 Vue Router...例如，在点击时先判断当前路由是否为目标路由，如果是，则通过`router.replace`方法进行替换，如果不是，则通过`router.push`方法进行跳转。这样可以避免重复点击同一个路由时报错的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值