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

最新推荐文章于 2023-11-13 18:14:20 发布

zwj、

最新推荐文章于 2023-11-13 18:14:20 发布

阅读量2.2k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Twisted_/article/details/120267700

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错

原因

是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);
}