修改页面路由重复点击报错

最新推荐文章于 2023-10-02 11:08:16 发布
最新推荐文章于 2023-10-02 11:08:16 发布
阅读量108 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52608028/article/details/119241645
这篇博客主要介绍了一个常见的Vue应用中遇到的问题——页面路由重复点击导致的错误。作者提供了一种解决方案，通过覆盖Vue Router的原型方法push，捕获并处理可能出现的错误，确保导航不会冗余。这个修改可以防止用户在应用程序中意外地多次触发相同路由的加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

报错Avoided redundant navigation to current location: "/index

// 修改页面路由重复点击报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)
解决ElementUI导航栏重复点菜单报错问题
qq_52499703的博客
08-31 849
解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
解决router重复push报错
i_for的博客
01-23 1069
在自定义的Router.prototype.push方法中，首先将原始的Router.prototype.push方法保存在originalPush变量中。在新定义的push方法中，调用了原始的Router.prototype.push方法，并将location参数传递给它。这样，如果在路由跳转过程中发生错误，可以处理该错误并进行相应的处理。总之，这段代码的作用是重写了Router.prototype.push方法，以便在执行路由跳转时添加自定义逻辑，并捕获并处理可能出现的错误。（内容由讯飞星火AI生成）
vue-router重复点击报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current
德蕾莎之道
09-10 289
import Router from 'vue-router' Vue.use(Router) const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
代码跳转路由报错_vue路由报错Navigating to current location ("/login") is not allowed踩坑总结...
weixin_39715513的博客
01-14 443
.在我添加“未登录”判断后，想自动跳转到登录页。但是遇到了问题：Navigating to current location ("/login") is not allowed不停的报错： 背景：我在main.js里面写了判断路由跳转。解决办法：网上说：在路由跳转的时候同一个路由多次添加是不被允许的 所以最后：代码：import Vue from 'vue'import App from './A...
解决首页面路由重复点击报错
weixin_42937036的博客
08-14 320
多次点击路由跳转按钮，在控制台会报错，虽然对项目的运行没有什么影响，但总会觉得代码写的不够好 解决办法：在导入路由的文件中加入下面代码 /** * 修改首页面路由重复点击报错 */ const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => er
vue页面路由跳转重复报错的问题
多看书少吃饭的博客
06-20 1372
vue页面路由跳转重复报错的问题
连续点击路由跳转报错问题
m0_64139140的博客
10-02 251
以修改代码的方式，修改vue-router原型对象中的push方法，捕获错误,就不会出现报错。做登录功能时，点击登录按钮，触发this.$router.push()方法进行路由跳转。多次点击时路由发生了重复跳转，就会报错。降级到3.0.x版本就不会出现这个问题。只点击一次按钮时可以正常跳转。第一种：路由版本的原因，将。
vue重复路由报错解决
Toozky的博客
01-22 2004
vue重复路由报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation…
vue3.x 重复点击路由报错
weixin_45773503的博客
02-10 581
这个报错是重复路由引起的。 需要给VueRouter里面自己重写 push 和 replace 方法 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } const originalReplace = VueRouter.pro.
vue 重复点击菜单，路由重复报错
pinbolei的博客
04-12 900
报错信息 vue-router在3.0版本以上时，重复点菜单，控制台会报错，虽然不影响使用，但是最好处理下这个问题，不然也可能会影响调试其他问题。 报错原因 vue-router在3.0版本以上时 ，回调形式改成了promise api，返回的是promise，如果没有捕获到错误，控制台始终会出现如上图的报错 node_module/vue-router/dist/vue-router.js 搜VueRouter.prototype.push 解决方法 1.降低vue-router的版本 npm i v
关于重复点击同一个路由出现的报错问题解决
tcyu_01的博客
07-28 487
在新版本的vue-router中，重复点击同一个路由会出现以下报错： 解决方案如下： 方案1、vue-router降级处理(但不推荐) npm i [email protected] 方案2、直接在push方法最后添加异常捕获，例如： <van-search v-model="SearchVal" shape="round" placeholder="请输入搜索关键词" disabled @click="$router.push('/home/searchPopup').catch(err
vue 动态路由第一次点击报错找不到路径，第二次点击可真长查看
03-27
嗯，用户想解决Vue动态路由第一次点击报错的问题，具体是“未找到路径”的错误。我需要根据提供的引用信息和自己的知识来思考解决方案。 首先，用户提到的是动态路由的问题。动态路由通常是指路由路径中带有参数，...
为什么vue2路由点击两次会报错
12-29
### Vue2 中路由点击两次导致报错的原因 在 Vue2 项目中，当用户快速连续点击同一个路由链接时，可能会触发导航守卫多次执行，进而引发错误。这种情况通常发生在浏览器尝试解析相同的 URL 或者目标路由与当前路由...
Vue-Router给当前url添加参数时报错 Navigation Duplicated Avoided redundant navigation to current location
serfend's blog
04-23 2257
发现当动态修改当前页面的url中的query时会报错 是因为新创建的路由不能使用老路由的对象，而应该重新创建一个对象，以解决问题 报错内容 新老路由发生重复，停止跳转 解决方法 // 首先获取当前url const q = this.$route && this.$route.query // 通过创建新的路由的方式来添加参数 this.$router.push({ query: Object.assign({ filename: '' }, q) }) 原因 查看Vue-R.
XPage新标签页 - Chrome 应用商店 0.6.7.0.crx
08-25
XPage新标签页 - Chrome 应用商店 0.6.7.0.crx
ComfyUILotus Depth实现高效单目深度估计与细节重建
08-25
文件编号：c0068 ComfyUI使用教程、开发指导、资源下载： https://datayang.blog.csdn.net/article/details/145220524 AIGC工具平台Tauri+Django开源ComfyUI项目介绍和使用 https://datayang.blog.csdn.net/article/details/146316250 更多工具介绍 项目源码搭建介绍： 《我的AI工具箱Tauri+Django开源git项目介绍和使用》https://datayang.blog.csdn.net/article/details/146156817 图形桌面工具使用教程： 《我的AI工具箱Tauri+Django环境开发，支持局域网使用》https://datayang.blog.csdn.net/article/details/141897682
基于STM32单片机的串口双机通信汽车电量里程模拟项目 - OLED显示
08-25
内容概要：本文介绍了基于STM32单片机的串口双机通信项目，用于模拟汽车电量和里程。该项目涉及两个STM32单片机之间的数据交互，其中一个作为主控板负责调整参数并显示，另一个作为驱动板负责发送传感器数据。项目提供了详细的程序源码和Proteus仿真文件，涵盖了硬件连接、按键处理、ADC采集、串口通信协议以及OLED显示等多个方面。文中还特别提到了按键消抖、软件滤波、串口通信优化和OLED图形界面的设计细节。 适合人群：嵌入式系统开发人员，尤其是对STM32单片机和串口通信感兴趣的开发者。 使用场景及目标：本项目的应用场景为汽车电子系统的开发与测试，旨在帮助开发人员理解和掌握STM32单片机的串口通信机制及其应用。目标是通过实际项目操作，提升开发人员对嵌入式系统设计的理解和技术水平。 其他说明：项目中包含了多个实用的技术点，如状态机实现的按键处理、一阶低通滤波、DMA+环形缓冲区的串口通信优化、OLED GUI库的应用等。此外，项目还包括了一个有趣的彩蛋——当里程达到520公里时，OLED会显示特殊爱心动画。
BusyBox环境Armv7l-ARMv7 架构 安装curl命令
最新发布
08-25
busybox环境armv7l---ARMv7 架构 安装curl命令
湖北新文道2026考研数学强化测试卷-数学二(1).pdf
08-25
湖北新文道2026考研数学强化测试卷-数学二(1).pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值