前端开发:Vue项目报错NavigationDuplicated:Avoided redundant navigation to current location:“/XXX”的解决方法

最近在Vue项目开发的过程中遇到一个问题,那就是在点击同一个路由操作的时候,控制台会报一下错误提示:

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/Refund".

前端开发:Vue项目报错NavigationDuplicated:Avoided redundant navigation to current location:“/XXX”的解决方法_第1张图片

经过排查之后才发现是关于Vue中路由重复引起的错误,经过查找资料以及搜索相关知识,该报错原因是因为ElementUI导航栏里面的vue-router在3.0以上版本重复点击菜单引起的路由重复报错,得出了以下解决步骤:

打开Vue项目,找到router文件夹下的index.js文件,

前端开发:Vue项目报错NavigationDuplicated:Avoided redundant navigation to current location:“/XXX”的解决方法_第2张图片

然后添加如下几行代码,即可解决问题,具体代码如下所示:

const includPush = Router.prototype.push

Router.prototype.push = function push(location) {

  return includPush.call(this, location).catch(err => err)

}

前端开发:Vue项目报错NavigationDuplicated:Avoided redundant navigation to current location:“/XXX”的解决方法_第3张图片

 

 

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

三掌柜的微信公众号:

前端开发:Vue项目报错NavigationDuplicated:Avoided redundant navigation to current location:“/XXX”的解决方法_第4张图片

三掌柜的新浪微博:

前端开发:Vue项目报错NavigationDuplicated:Avoided redundant navigation to current location:“/XXX”的解决方法_第5张图片

 

你可能感兴趣的:(前端开发,vue.js,前端开发)