Navigation cancelled from “/?redirect=%2Fhome“ to “/home“ with a new navigation

原创于 2021-11-30 21:16:16 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

3 篇文章

订阅专栏

在Vue应用中遇到一个登录后无法跳转主页的错误，表现为'Navigation cancelled'，这是由于Vue Router 3.0及以上版本的内部错误。尝试在router/index.js文件中覆盖push和replace方法以处理错误，但未能解决问题。最终通过降级vue-router到3.0版本成功解决了此问题。

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

问题

在登录页面成功获得后台传来的token后，无法跳转主页，报错如下

Navigation cancelled from "/?redirect=%2Fhome" to "/home" with a new navigation

这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况，也是vue-router3.0以上的问题

解决方法：

在路由router/index.js文件下添加：

//解决编程式路由往同一地址跳转时会报错的情况
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);
};