解决报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “
报错内容：
vue-router.esm.js?68cf:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search".
at createRouterError (webpack-internal:///./node_modules/_vue-router@3.5.3@vue-router/dist/vue-router.esm.js:1993:15)
at createNavigationDuplicatedError (webpack-internal:///./node_modules/_vue-router@3.5.3@vue-router/dist/vue-router.esm.js:1978:15)
报错图片：
出现报错原因：使用编程式路由实现跳转的时候，多次执行会抛出NavigationDuplicated的警告错误是因为"vue-router"3版本之后 底层引入了promise,而通过声明式导航没有出现此类问题是因为vue-router底层已经处理好了。
解决方法1：在router文件夹下的index.js下添加如下内容
// 解决vue-router在3.0版本以上重复点报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
解决方法2：在router文件夹下的index.js下：
let originPush=VueRouter.prototype.push;
let originReplace=VueRouter.prototype.replace;
//重写push/replace
//第一个参数：告诉原来的push方法，往哪里跳转（传递哪些参数）
//第二个参数：成功的回调
//第三个参数：失败的回调
//call/apply区别
//相同点：都可以调用函数一次，都可以篡改函数的上下文(this）一次‘
//不同点：call/apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
VueRouter.prototype.push=function(location,resolve,reject){if(resolve&&reject){originPush.call(this,location,resolve,reject);}else{originPush.call(this,location,()=>{},()=>{});}
}
VueRouter.prototype.replace=function(location,resolve,reject){if(resolve&&reject){originReplace.call(this,location,resolve,reject);}else{originReplace.call(this,location,()=>{},()=>{});}
}let originPush=VueRouter.prototype.push;
let originReplace=VueRouter.prototype.replace;
//重写push/replace
//第一个参数：告诉原来的push方法，往哪里跳转（传递哪些参数）
//第二个参数：成功的回调
//第三个参数：失败的回调
//call/apply区别
//相同点：都可以调用函数一次，都可以篡改函数的上下文(this）一次‘
//不同点：call/apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
VueRouter.prototype.push=function(location,resolve,reject){
if(resolve&&reject){
originPush.call(this,location,resolve,reject);
}else{
originPush.call(this,location,()=>{},()=>{});
}
}
VueRouter.prototype.replace=function(location,resolve,reject){
if(resolve&&reject){
originReplace.call(this,location,resolve,reject);
}else{
originReplace.call(this,location,()=>{},()=>{});
}
}
解决报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “相关推荐
- 解决Vue报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
问题描述:重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能坐视不管. 解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplica ...
- vue报错Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...
- Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/deta
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: " ...
- vue2里面的Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
编程式导航跳转到当前路由(参数不变),多次执行就会在控制台出现如下结果: 怎么解决: (1)最有效--重写push.replace 在router-index.js中添加: // 重写push.rep ...
- 解决Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location问题
在Vue路由中遇到Error: Avoided redundant navigation to current location:xxxx:错误,意思是路由重复 在router文件夹下的index.j ...
- Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/zhu“
错误原因:避免重复导航到当前路径 <template><div><input type="text" placeholder="搜索&quo ...
- Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/sear
1). 问题: 编程式路由跳转到当前路径且参数没有变化时会抛出 NavigationDuplicated 错误 2). 原因分析: vue-router3.1.0之后, 引入了push()的promi ...
- Vue-Router 路由重复点击时报错 Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to curr
前言 总结一下,在项目中遇到的一个小问题,使用 Vue 构件的项目里,有时候会存在 重复点击路由 报错的问题,Uncaught (in promise) NavigationDuplicated:Av ...
- Uncaught (in promise) Error: Avoided redundant navigation to current location: “/index“. 解决方法
在router.js中加入以下代码就可以 const originalPush = Router.prototype.push Router.prototype.push = function pus ...
最新文章
- 查看imooc服务器文件
- 过程工程中的计算机应用基础,CDIO工程教育培养模式在《计算机应用基础》课中的应用...
- 在IDEA中设置Java的堆大小
- c语言10-100000取整数,100个C语言地编程题.docx
- C#泛型编程基础知识总结【转】
- php和xml区别,html与xhtml和xml有什么区别
- nacos需要mysql吗_nacos无法连接mysql的解决方法
- 提高网站速度|负载均衡
- R及RStudio下载安装教程（超详细）
- 案例研究：手机APP的UI设计流程
- idea英文翻译插件Translation
- uint 数据类型理解
- Gitbub认证及代码提交
- 如何在学习中找到乐趣？怎样才能找到学习的乐趣
- Graphene 2.0.0.Alpha4，Selenium 的 Ajax 测试扩展
- 微云存储空间多大_微云用户容量调整多少了 微云用户容量变小了是吗
- word毕设论文制作——封面（一）
- 数据分析实战（一百零一）：项目分析思路 —— 用户增长实践经验分享
- Hadoop HA介绍
- 小队pkc++_骑士小队2人金属第一印象