【错误总结】Uncaught (in promise) Error: Navigation ...

最新推荐文章于 2024-12-11 12:49:04 发布

原创最新推荐文章于 2024-12-11 12:49:04 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何通过修改Vue Router原型解决编程式路由中向同一地址频繁跳转导致的错误，提供push和replace方法的重写实现，确保顺畅导航。

部署运行你感兴趣的模型镜像

报错

原因

是vue-router内部错误,导致导航跳转问题,往同一地址跳转时会报错的情况push和replace 都会导致这个情况的发生。

解决办法

 // main.js
import Vue from 'vue'
import Router from 'vue-router'

//解决编程式路由往同一地址跳转时会报错的情况
const originalPush = VueRouter.prototype.push;

const originalReplace = VueRouter.prototype.replace;

//push
VueRouter.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);
};

//replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalReplace.call(this, location, onResolve, onReject);
  	return originalReplace.call(this, location).catch(err => err);
}