vue-router 报错：Navigation cancelled from“/...“ to “/...“ with a new navigation.

最新推荐文章于 2023-08-23 11:05:39 发布
最新推荐文章于 2023-08-23 11:05:39 发布
阅读量9.7k 收藏 5
点赞数 6
分类专栏： vue-router 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42185724/article/details/112219867
版权

做个记录
终究还是自己太菜，才会出现这种错误。一开始出现问题就百度了下，要么换路由版本，要么用捕获错误日志来避免报错，感觉这些不是治根的解决办法。
思路
百度翻译一下：vue-router 报错：Navigation cancelled from“/…“ to “/…“ with a new navigation.
提取关键词，导航从“/…”取消到“/…”，根据字面意思，准备去下个页面，但是还没有实际去到下个页面就取消去到了另一个页面，说明重定向了两次。问题关键点就在这儿，解决重定向问题即解决了这个bug

迎面吹来微风
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue-router报错Error: Navigation cancelled from “/course“ to “/user“ with a new navigation.
weixin_47597807的博客
06-27 1859
出现这个错误是因为在你的vue-router全局导航守卫中出现了页面跳转到了一个页面之后又重定向到了另一个界面 举个小例子： router.beforeEach((to,from,next)=>{ if(to.matched.some(record => record.meta.requiresAuth)){ if(!store.state.user){ //跳转到登陆页面 next({ name:'login', query:
解决 Uncaught (in promise) Error: Navigation cancelled from “/...“ to “/...“ with a new navigation.
qianduan1020的博客
09-13 3150
报错如下： 解决方法： 在路由器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
记录错误1——vue路由跳转报错Navigation cancelled from“/...“ to “/...“ with a new navigation.
You_got_this的博客
09-07 9915
介绍：项目中对当前登录的用户类型进行相应的菜单权限限制，为防止用户在浏览器网址栏中手动输入path，然后回车就可以进入该页面，所以需要做一个拦截，但是又不想为每一个路由都写一个守卫就在最外侧路由组件 由于种种原因没有采用路由守卫 用的是watch $route监听当前路由的变化 在这里判断用户是否有权限进入到要去的路由，没有权限就跳到概览页，这时候报了一个错 百度了一下是因为vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。 百度到的解..
vue2： Router报错经验--Uncaught (in promise) Error: Navigation cancelled from“/mall“to “/home“ with a new
最新发布
weixin_1095的博客
08-23 1106
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
解决“Uncaught (in promise) Error: Navigation cancelled from “/login“ to “/“ with a new navigation“报错
Link_Anew的博客
07-06 2660
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
解决webpack4+升级webpack5+ vue-pdf不可用问题
06-09
Module build failed (from ./node_modules/vue-pdf/node_modules/worker-loader/dist/cjs.js): Error: MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)
vue-org-tree：基于Vue2.x的简单组织树
02-06
Vue-org-tree 基于Vue2.x的简单组织树形图 用法 NPM # use npm npm i vue2-org-tree # use yarn yarn add vue2-org-tree 导入插件 import Vue from 'vue' import Vue2OrgTree from 'vue2-org-tree' Vue . use ( ...
vue-countdown：Vue.js的倒计时组件
02-06
├── vue-countdown.js (UMD) ├── vue-countdown.min.js (UMD, compressed) ├── vue-countdown.common.js (CommonJS, default) └── vue-countdown.esm.js (ES Module) 入门 安装 npm install @...
vue-aplayer：:shortcake:Vue.js的漂亮HTML5音乐播放器
02-06
这是@moefe/vue-aplayer 2.0的分支。 状态：测试版 大多数计划中的功能都已到位，但可能仍然存在错误。 文献资料 可以在上找到文档 安装 yarn add @moefe/vue-aplayer 用法 import Vue from 'vue' ; import APlayer...
vue-router跳转报错Navigation cancelled from“/...“ to “/...“ with a new navigation guard
深圳最菜前端
05-31 1873
今天维护老项目，遇到这么一个路由跳转的bug，记录一下，头都找大了，终于解决了 虽然不影响正常的跳转，但是每次点击跳转都会报错，所以很烦，然后网上也找了很多方法，也试了很多方法，但是好多都是复制粘贴的文章，看的我好心累，索性我自己总结一个 简单粗暴模式，直接更改router版本 ，目前网上比较多的，是2个（没尝试） 将版本降低到3.0以下，比如2.8.0 将版本升级到3.0版本，比如3.0.7 修改router.push()模式（试过了没用） 说的是因为是promise模式，没有捕获到错.
Navigation cancelled from “/?redirect=%2Fhome“ to “/home“ with a new navigation
e5bb96的博客
11-30 2129
问题 在登录页面成功获得后台传来的token后，无法跳转主页，报错如下 Navigation cancelled from "/?redirect=%2Fhome" to "/home" with a new navigation 这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况，也是vue-router3.0以上的问题 解决方法： 在路由router/index.js文件下添加： //解决编程式路由往同一地址跳转时会报错的情况 c
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
SunPeng的博客
04-13 2034
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
vue报错：Navigation cancelled from “/userIndex“ to “/blank/login“ with a new navigati
菜鸡互啄的博客
11-03 1300
最近在弄一个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
解决element-ui.common.js?5c96:3:Navigation cancelled from “/admin“ to “/users“ with a new navigation.
qq_60976312的博客
11-24 2234
解决element-ui.common.js?5c96:3:Navigation cancelled from "/admin" to "/users" with a new navigation.
vue Uncaught (in promise) Error: Navigation cancelled from “/home“ to “/login“ with a new navigation
前端的路上
08-19 2120
1、初始化进入项目 ，登录过期重定向到登录页面，路由报错 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //解决编程式路由往同一地址跳转时会报错的情况 const originalPush = VueRouter.prototype.push; const originalReplace = VueRouter.prototype.replace; //push VueRouter.prototy
Uncaught (in promise) Error: Navigation cancelled from “xxx“ to “xxx“ with a new navigatio
qq_64180379的博客
06-12 206
解决：如果此报错是在全局路由守卫，即让 next() 执行一次即可，删掉多余次数，使其只执行一次。
亲测解决 ：Navigation cancelled from “xxx“ to “xxx“ with a new navigation
web15185420056的博客
03-06 966
使用vue 3.0 写了一个登入页面，再点击登入的时候，第一次点击会没有反应，F12查看接口都调用了但是没有跳转，控制台打印出错： 错误说有异常没有捕获； 这个错误是vue -router 内部的错误，没有进行catch处理导致的； 再vue-router3.0以上的版本新增功能：push和replace方法会返回一个promise； 解决方案： 在vue的router的js中添加下面代码 const originalPush = VueRouter.prototype.push const origin
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值