vue-router报错Error: Navigation cancelled from “/course“ to “/user“ with a new navigation.

最新推荐文章于 2023-08-23 11:05:39 发布
最新推荐文章于 2023-08-23 11:05:39 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47597807/article/details/118267807
版权
当在vue-router全局导航守卫中发生页面跳转后立即重定向时，会出现'Navigation cancelled'错误。例如，从'/course'到'/user'的跳转被新的导航中断。解决方案是避免使用嵌套的条件判断导致的连续导航。
摘要由CSDN通过智能技术生成

出现这个错误是因为在你的vue-router全局导航守卫中出现了页面跳转到了一个页面之后又重定向到了另一个界面
举个小例子：

router.beforeEach((to,from,next)=>{
   
  if(to.matched.some(record => record.meta.requiresAuth)
最低0.47元/天 解锁文章
在下小小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决 Uncaught (in promise) Error: Navigation cancelled from “/...“ to “/...“ with a new navigation.
qianduan1020的博客
09-13 3176
报错如下： 解决方法： 在路由器router里面的index.js里面加上下面这段代码就没事了 const originalPush = Router.prototype.push const originalReplace = Router.prototype.replace Router.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) { return o
解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
明天也要努力的博客
12-11 2万+
问题： 项目中需要对用户是否登录进行判断，如果用户未登录或者 token 过期就需要跳转登录页面，进行登录验证。所以需要做一个拦截，在跳转登录页面时报了一个错。 报错如下图所示： 原因： 这个错误是 vue-router 内部错误，没有进行 catch 处理，导致的编程式导航跳转问题，向同一地址跳转时会报错的情况（push 和replace 都会导致这个情况的发生）。 解决： 方案一： 安装 vue-router 3.0 以下版本，先卸载 3.0 以上版本然后再安装旧版本 。 npm install vu
vue2： Router报错经验--Uncaught (in promise) Error: Navigation cancelled from“/mall“to “/home“ with a new
最新发布
weixin_1095的博客
08-23 1164
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
SunPeng的博客
04-13 2167
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
vue-router 报错：Navigation cancelled from“/...“ to “/...“ with a new navigation.
热门推荐
weixin_47084275的博客
08-24 3万+
vue-router@3.0版本及以上回调形式已经改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告 （注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…） * 怎么解决呢? 方案一： 安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本 npm install vue-router@2.8.0 -S 方案二： 针对于路由跳转相同的地址添加catch捕获一下异常：this.$router.
Navigation cancelled from “/TeacherIntroduce“ to “/teacherCenterDashboard/Teachclassmanagement“ with
qq_41429765的博客
07-22 2392
关于Vue Router报错 路由跳转报错问题只需要在router中的index.js中写: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush...
Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navigation
weixin_45092437的博客
07-25 4027
该错误是因为vue-router的内部没有对编程式导航进行catch处理，所以在使用`this.$router.push()` 和 `this.$router.replace` 进行路由跳转时，往同一地址跳转时或者在跳转的 mounted/activated 等函数中再次向其他地址跳转时会出现报错。但是在3.1.0版本及更高版本中，页面在跳转路由控制台会报Uncaught (in promise)的问题，push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。......
【解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation】
m0_65450343的博客
08-13 1657
解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation_明天也要努力的博客-CSDN博客
解决element-ui.common.js?5c96:3:Navigation cancelled from “/admin“ to “/users“ with a new navigation.
qq_60976312的博客
11-24 2248
解决element-ui.common.js?5c96:3:Navigation cancelled from "/admin" to "/users" with a new navigation.
Vue Router: Uncaught (in promise) Error: Navigation cancelled
sunshineTing2的博客
03-09 936
解决编程式路由往同一地址跳转时会报错的情况 Uncaught (in promise) Error: Navigation cancelled from "xxx" to "xxx" with a new navigation. 解决：在router文件夹下等index.js文件中写入 // router文件夹下等index.js文件中写入 //解决编程式路由往同一地址跳转时会报错的情况 const originalPush = VueRouter.prototype.push const original
亲测解决 ：Navigation cancelled from “/xxx“ to “/xxx“ with a new navigation.
鞠晓健
12-12 4878
解决 Navigation cancelled from “/xxx“ to “/xxx“ with a new navigation
vue-router跳转报错Navigation cancelled from“/...“ to “/...“ with a new navigation guard
深圳最菜前端
05-31 1941
今天维护老项目，遇到这么一个路由跳转的bug，记录一下，头都找大了，终于解决了 虽然不影响正常的跳转，但是每次点击跳转都会报错，所以很烦，然后网上也找了很多方法，也试了很多方法，但是好多都是复制粘贴的文章，看的我好心累，索性我自己总结一个 简单粗暴模式，直接更改router版本 ，目前网上比较多的，是2个（没尝试） 将版本降低到3.0以下，比如2.8.0 将版本升级到3.0版本，比如3.0.7 修改router.push()模式（试过了没用） 说的是因为是promise模式，没有捕获到错.
“Uncaught (in promise) Error: Navigation cancelled from “/“ to “/login“ with a new navigation“报错处理
A1292218927的博客
08-08 2381
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。 push和replace 都会导致这个情况的发生。 解决方法如下: 在路由器中进行配置：router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 解决报错 const originalPush = Router.prototype.push const ori
解决“Uncaught (in promise) Error: Navigation cancelled from “/login“ to “/“ with a new navigation“报错
Link_Anew的博客
07-06 2699
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
vue报错：Navigation cancelled from “/userIndex“ to “/blank/login“ with a new navigati
菜鸡互啄的博客
11-03 1311
最近在弄一个vue项目时碰到这么一个报错，查了下资料，记录一下： 这个错误是vue-router的内部错误,是因为没有进行catch处理,导致的编程式导航跳转问题,往同一个地址跳转时，会报错。 解决方法如下: 在路由文件中进行配置：router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 解决报错 const originalPush = Router.prototype.push co
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值