位置: IT常识 - 正文
Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法(vue的路由跳转了,可是页面没有变化)
编辑：rootadmin推荐整理分享Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法(vue的路由跳转了,可是页面没有变化)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue路由有几种导航钩子,vue中的路由导航守卫,vue中的路由导航守卫,vue路由实现导航栏,vue路由实现导航栏,vue路由实现导航栏,vue路由跳转报错,vue路由实现导航栏,内容如对您有帮助，希望把文章链接给更多的朋友！
点击vue路由跳转，控制台报错：Avoided redundant navigation to current location: “/xxxxxx“解决方法
一、描述问题在使用this.$router.push跳转页面时候，重复点击菜单引起路由重复报错
比如当前页面显示区是路由组件‘/cats’，重复点击按钮进行this.$router.push跳转，要跳转的组件仍然是‘/cats’，那么控制就会报如下错误：
二、报错原因
由于 vue-router3.0 及以上版本回调形式改成Promise API的形式了，返回的是一个Promise 。也是说 push和replace都是Promise类型了。
而Promise的回调函数resolve和reject，必须传其中一个，否则会报错。如果路由地址跳转相同，且没有捕获到错误，控制台始终会出现上图所出现的问题。
三、解决方法1、安装vue-router3.0以下版本先卸载3.0以上版本然后再安装旧版本
npm i @vue-router2.8.02、为每一个Promise添加一个回调函数缺点：每个路由跳转都要添加回调函数
this.$router.push({ name: 'Cats', }, () => {})3、修改VueRouter原型对象上的push/replace方法在router/index.js文件中添加如下代码
// 获取原型对象push函数const originalPush = VueRouter.prototype.push// 获取原型对象replace函数const originalReplace = VueRouter.prototype.replace// 修改原型对象中的push函数VueRouter.prototype.push = function push(location){return originalPush.call(this , location).catch(err=>err)}// 修改原型对象中的replace函数VueRouter.prototype.replace = function replace(location){return originalReplace.call(this , location).catch(err=>err)}四、原理分析const originalReplace = VueRouter.prototype.replaceVueRouter.prototype.replace = function replace(location){return originalReplace.call(this , location).catch(err=>err)}location ：一个保存了当前要跳转路径的对象；
call()函数：可以在调用函数的同时改变this的指向，常用于实现继承, 两个参数： this：由于call处于原型对象内部，所以此处this指向的是当前VueRouter的实例对象；而originalPush指向的是VueRouter.prototype.push，旨在于调用当前VueRouter实例对象中的push方法； location：在方法调用时传入获取到的location。
catch：链式调用catch方法，目的是在方法执行时，捕获错误。 在js机制中，catch捕获到Exception时，代码还会继续向下执行。所以此处的catch未作任何操作，代码也会继续向下执行，和抛给浏览器的错误其实时一致的
五、额外补充1、路由导航方式上一篇：使用Python批量旋转，镜像图片(python 批量)
下一篇：20230420-上海广策信息技术笔试记录(上海广为)
