Vue Router: Uncaught (in promise) Error: Navigation cancelled

最新推荐文章于 2024-09-27 10:39:41 发布
最新推荐文章于 2024-09-27 10:39:41 发布
阅读量1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue Router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/114588836
解决编程式路由往同一地址跳转时会报错的情况

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 originalReplace = VueRouter.prototype.replace
//push
VueRouter.prototype
最低0.47元/天 解锁文章

200万优质内容无限畅学
vue-router报错Error: Navigation cancelled from “/course“ to “/user“ with a new navigation.
weixin_47597807的博客
06-27 2146
出现这个错误是因为在你的vue-router全局导航守卫中出现了页面跳转到了一个页面之后又重定向到了另一个界面 举个小例子： router.beforeEach((to,from,next)=>{ if(to.matched.some(record => record.meta.requiresAuth)){ if(!store.state.user){ //跳转到登陆页面 next({ name:'login', query:
Vue Router 官方文档（二）导航守卫（`router.beforeEach`、完整的导航解析流程 ）、路由懒加载(Promise)、路由元信息( `meta` )、过渡动效(` ＜router
qq_43456781的博客
10-13 695
Vue Router 官方文档（二）导航守卫（router.beforeEach、完整的导航解析流程 ）、路由懒加载(Promise)、路由元信息( meta )、过渡动效(<router-view> )、数据获取、滚动行为(scrollBehavior)、导航故障 文章目录Vue Router 官方文档（二）导航守卫（`router.beforeEach`、完整的导航解析流程 ）、路由懒加载(Promise)、路由元信息( `meta` )、过渡动效(` ` )、数据获取、滚动行为(`scro
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
SunPeng的博客
04-13 2359
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
vue2： Router报错经验--Uncaught (in promise) Error: Navigation cancelled from“/mall“to “/home“ with a new
weixin_1095的博客
08-23 1340
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
Vue Router报错问题，Uncaught (in promise) Error: Navigation cancelled from “/“ to “/home“ with a
weixin_38146633的博客
12-21 1058
路由报错，从登录页跳转首页跳转不成功，需要两次点击才能成功跳转 主要参考https://blog.csdn.net/Beam007/article/details/121630233 参考文献：https://blog.csdn.net/Beam007/article/details/121630233 https://blog.csdn.net/qq_38392623/article/details/121185731 https://blog.csdn.net/qq_42092177/article/
Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navigation
weixin_45092437的博客
07-25 4153
该错误是因为vue-router的内部没有对编程式导航进行catch处理，所以在使用`this.$router.push()` 和 `this.$router.replace` 进行路由跳转时，往同一地址跳转时或者在跳转的 mounted/activated 等函数中再次向其他地址跳转时会出现报错。但是在3.1.0版本及更高版本中，页面在跳转路由控制台会报Uncaught (in promise)的问题，push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。......
Error: Navigation cancelled from "/" to "/yx/recipe" with a new navigation. at createRouterError (vue-router.esm.js:2056:15)
最新发布
03-11
好的，我现在需要帮助用户解决Vue Router的导航取消错误：“Uncaught (in promise) Error: Navigation cancelled from "/mall" to "/home" with a new navigation”。首先，我得回忆一下之前学过的相关知识，以及...
import { createRouter, createWebHistory } from 'vue-router' // 路由白名单（不需要鉴权的路径） const WHITE_LIST = ['/login', '/404'] // 动态导入组件（增加加载状态处理） const lazyLoad = (path) => () => import(/* webpackChunkName: "[request]" */ `@/views/${path}/index.vue`) // 路由配置 const routes = [ { path: '/', name: 'index', component: lazyLoad('index'), meta: { title: '首页', requiresAuth: true // 需要登录鉴权 } }, { path: '/login', name: 'login', component: lazyLoad('login'), meta: { title: '登录', guestOnly: true // 仅允许未登录用户访问 } }, { path: '/:catchAll(.*)', // 404处理 name: 'not-found', component: lazyLoad('404'), meta: { title: '页面不存在' } } ] const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes }) // 路由鉴权逻辑 router.beforeEach(async (to, from, next) => { // 设置页面标题 document.title = to.meta.title || '默认标题' const isAuthenticated = checkAuthStatus() // 获取当前登录状态 // 在白名单中直接放行 if (WHITE_LIST.includes(to.path)) return next() // 需要登录但未认证 if (to.meta.requiresAuth && !isAuthenticated) { next({ path: '/login', query: { redirect: to.fullPath } // 携带重定向地址 }) } // 已登录用户访问guestOnly页面 else if (to.meta.guestOnly && isAuthenticated) { next(from.path === '/login' ? '/' : from) // 避免登录后无限循环 } // 正常放行 else { next() } }) // 检查认证状态的方法（根据实际业务实现） function checkAuthStatus() { return localStorage.getItem('token') !== null } export default router 为什么我使用router.push('/')方法没反应
03-08
- `Uncaught (in promise) Error: Navigation cancelled` - `Failed to resolve component: default` ### ️ 推荐解决方案 1. **优化鉴权逻辑** ```javascript router.beforeEach(async (to, from, next) => {...
“Uncaught (in promise) Error: Navigation cancelled from “/“ to “/login“ with a new navigation“报错处理
A1292218927的博客
08-08 2670
这个错误是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
vue Uncaught (in promise) Error: Navigation cancelled from “/home“ to “/login“ with a new navigation
前端的路上
08-19 2238
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 “/ad“ to “/result“ with a new navigation.
zoepriselife316的博客
08-20 517
Uncaught (in promise) Error: Navigation cancelled from “/ad” to “/result” with a new navigation. 这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。 解决方法： import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 解决with new navigat
解决“Uncaught (in promise) Error: Navigation cancelled from “/login“ to “/“ with a new navigation“报错
Link_Anew的博客
07-06 2991
这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。push和replace 都会导致这个情况的发生。
解决 Uncaught (in promise) Error: Navigation cancelled from “/...“ to “/...“ with a new navigation.
li22356的博客
04-16 1万+
报错问题如下图所示： 原因： 这个错误是vue-router内部错误,导致导航跳转问题,往同一地址跳转时会报错的情况push和replace 都会导致这个情况的发生。 解决方法： 在路由器router里面的index.js里面加上下面这段代码就没事了。 //解决编程式路由往同一地址跳转时会报错的情况 const originalPush = VueRouter.prototype.push; const originalReplace = VueRouter.prototype.replace; //pu
Uncaught (in promise) Error: Navigation cancelled from “/“ to “/login“ with a new navigation.解决方案
m0_46165586的博客
09-27 2373
路由跳转`控制台提示：Uncaught (in promise) Error: Navigation cancelled from "/" to "/login" with a new navigation.`通常是因为在路由跳转过程中，某个导航被取消了。
解决 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
vue-router报错: uncaught error during route navigation
qq_44535402的博客
02-21 8297
"[vue-router] uncaught error during route navigation:" Failed to resolve async component default: ChunkLoadError: "Uncaught (in promise) " {name: "ChunkLoadError", message: {message: "Loading chunk src_components_
解决vue3页面刷新，获取不到动态路由导致路由重定向的问题
lovelyYou123的博客
10-11 867
很简单，把获取动态路由的方法放在main.js中，然后执行方法。
vue-cli3中，重复点击同一个标签实现路由跳转，出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
bailizx
07-02 1801
目录 1 错误 2 原因 3 解决方法 1 错误 vue中，连续多次单击同一个路由标签（单击该标签会发生路由跳转）跳转路由时，出现Uncaught (in promise)错误。 如：上代码以及图如下 <template> <div class = "footerGuideStyle"> <a href="javascript:;" class = "footerItems" v-bind:class = "{on: isPath('/msite')
uncaught error during route navigation:
weixin_72271537的博客
08-27 6444
报错内容：译文：[Vue Router warn]:路由导航过程中未捕获的错误: uncaught error during route navigation:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值