Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navigation

2024-05-08 17:41:32

1、场景描述

最近在工作的nuxt项目中，使用vue-router替代nuxt的默认路由，这样使路由关系更明显，也更好调整，再就是可以使用vue-router的编程式导航，进行路由跳转。然后，问题就出现了，在使用this.$router.push() 和 this.$router.replace 进行路由跳转时，有时候会报 Uncaught (in promise)Error: Navigation cancelled from "/" to "/1" with a new navigation这种错误，但是使用声明式导航<router-link>的时候却不会报错，令人头秃。

2、定位问题

经过在网上查询前辈们发布的资料，最终得出结论：该错误是因为vue-router的内部没有对编程式导航进行catch处理，所以在使用this.$router.push() 和 this.$router.replace 进行路由跳转时，往同一地址跳转时或者在跳转的 mounted/activated 等函数中再次向其他地址跳转时会出现报错。但是在3.1.0版本及更高版本中，页面在跳转路由控制台会报Uncaught (in promise)的问题，push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。
声明式导航之所以不会出现这种问题，是因为vue-router在内部已经做了相关处理。

3、解决方案

在路由的配置文件中：如 router.js 或 router/index.js ，增加如下配置：

// 基本配置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)// 解决报错
const originalPush = Router.prototype.push
const originalReplace = Router.prototype.replace
// 针对 push 方法
Router.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 方法
Router.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)
}

Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navigation相关推荐

Vue前端报错Uncaught (in promise) Error: Navigation cancelled from “/...“ to “/...“ with a new navigation
需要在index.js文件中添加: const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function ...
Vue. 之报错 Uncaught (in promise)
Vue. 之报错 Uncaught (in promise) 在点击同一个URL的时候,会报错如下: 解决方案: 在项目目录下运行 npm i vue-router@3.0 -S 即可. 转载于:h ...
vue报错 Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
vue报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解 ...
vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
报错方法一.更换版本 npm i vue-router@3.0 -S 方法二修改入口文件 //main.js import Router from 'vue-router'const origin ...
【Vue-Bug记录】Vue 删除取消报错Uncaught (in promise) cancel
删除某条数据弹出删除提示框点击取消浏览器控制台报错报错原因: this.$confirm方法内置promise方法, 所以不能把.catch()去掉(因为取消操作时,无法捕获) 解决方法: 在 ...
vue报错Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation ...
记录一个vue项目报错UnhandledPromiseRejectionWarning: Unhandled promise rejection.
使用vue-cli创建vue项目,加入一些之前的代码,然后打包运行报错: (node:4892) UnhandledPromiseRejectionWarning: Unhandled promise ...
解决路由报错Uncaught (in promise) NavigationDuplicated:
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: " ...
vue启动报错Module build failed: Error: ENOENT: no such file or directory
vue启动项目报错,一大坨如下 Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/son ...
记一个vue router相关的 Uncaught (in promise) undefined 问题
在做一个项目时,登录页面调用路由跳转时 this.$router.push({ path: this.redirect || '/' }) 会出现一个错误提示: Uncaught (in promis ...

最新文章

热门文章