首页 > 其他分享 >Vue-router NavigationDuplicated 产生原因和解决方法

Vue-router NavigationDuplicated 产生原因和解决方法

时间:2022-09-25 13:23:13浏览次数:49  
标签:Vue vue NavigationDuplicated promise location push router

当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题(通俗来讲就是多次进入了同一个path,比如说当前你在/user/user-list页面,这时候你通过点击按钮或其他的方式又进入了/user/user-list页面,那就会抛出下面的问题)

这个问题是vue-router3.0版本往上才出现的问题,目前的[email protected] 版本官方已经修复了此问题。NavigationDuplicated 产生的时候会抛出一个promise,在3.0版本之前如果router.push没有设置callback,那么错误会被全局的 router 错误收集函数 handler所处理,但是现在push 和 replace会抛出promise,而这个promise如果没有被捕获的话,那就会被抛出到控制台,也就是handler不处理我们的promise了,这也是当时设计人员考虑不周出现的bug,我们也可以去vue-router的github上的issues板块上看到这个问题,目前NavigationDuplicated已经被关闭了。

知道了问题的产生原因那么解决方案其实已经显而易见了,以下是其中的两种解决方法:

1:这是最简单的方案只要更换一下vue-router版本就行,可以升级到3.1.1或者是降级到2.8,个人建议还是升级比较好。

2: 这一种其实只要自己在调用路由跳转函数的时候自己去捕捉处理一下promise就行了。

像这样 router.push('/location').catch(err => {})

或者直接把push在router原型上二次封装一下,

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
知其然,知其所以然。慢慢在探索的过程中,不知不觉你会变得更强。
————————————————
版权声明:本文为CSDN博主「河鲜森」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_34295211/article/details/102371714

标签:Vue,vue,NavigationDuplicated,promise,location,push,router
From: https://www.cnblogs.com/golden-duck/p/16727702.html

相关文章

  • vue 打包报错: npm ERR! missing script: build
    打包vue文件时候报错:npmERR!missingscript:build查看文件package.json中scripts参数所以此时的运行命令应为npmrunbuild:prod--report ......
  • Vue的nextTick的原理
    知识储备:事件循环有宏任务和微任务,宏任务所处的队列就是宏任务队列,队列可以有多个,第一个队列只有一个任务就是执行主线程的js代码,剩余队列任务有setTimeoutsetInterval微......
  • vue3和react虚拟DOM的diff算法区别
    vue3随着Vue3.0版本的发布,我们在使用或者对其源码进行阅读时会惊讶的发现,它又又又双叒叕变强了,尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升,它的更新机制会......
  • vue3 基础-Mixin
    本篇开始来学习一波vue中的一些复用性代码的基础操作,首先来介绍关于代码"混入"mixin的写法.直观理解这个mixin就是一个js对象去"混入"vue的组件呀,插件呀......
  • 尚品汇后台管理项目:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes
     问题描述:切换路由时控制台不断弹出警告  vue-router.esm.js?8c4f:16[vue-router]Duplicatenamedroutesdefinition    解决方案参考:vue动态添加路由,跳转页......
  • Vue项目的部署(服务器)
    前几天帮朋友写了一个可以动态查看地点温度的前端项目。目前已经部署上线了,访问链接点这里。服务器是朋友的,倒时候打不开会很正常,说不定又使用服务器玩大数据项目去了......
  • vue3新语法糖——setup script
    前言vue3上线已经很久了,许多小伙伴应该都已经使用过vue3了。那么在使用vue3compositionAPI的时候有没有觉得整个过程会比较繁琐呢。比如当你定义了一个方法,然后发现模......
  • Vue 页面渲染完成后获取元素并修改其CSS样式
    1.将所要获取的元素加入ref属性<divslot="header"class="clearfix"ref="clearFix"></div>2.获取元素对象,并修改样式methods:{changeStyle:function(){let......
  • vue的生命周期
     1.创建前beforeCreateddata和methods还没有进行初始化 2.创建后createddata和methods已经初始化完成 3.渲染前beforeMount 已经编译好了模板字符串,但是......
  • vue 使用百度地图JavaScript API GL 组件
    <template><divclass="component"><el-cardclass="cardStyle"><!--ready,地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例--><baidu-map......