Vue-router 报NavigationDuplicated解决方案

最新推荐文章于 2024-09-27 10:39:41 发布
最新推荐文章于 2024-09-27 10:39:41 发布
阅读量928 收藏
点赞数 1
分类专栏： vue-router 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cookysurongbin/article/details/104371966
版权

控制台报错信息
原因：Vue-router在3.1之后把$router.push()方法改为了Promise, 所以当你使用router.push的时候，按照旧写法没有写回调函数，则会抛出一个uncaught (in promise)的错误，交由全局错误处理则会直接打印报错，解决方法是在调用router.push的时候增加回调函数，如：

router.push('/location').catch(err => {err})
Vue-Router路由path相同警告，不允许导航到相同路由，报错“NavigationDuplicated: Avoided redundant navigation to current loc
Sodaxiang的博客
11-28 1365
Vue-Router路由path相同警告，不允许导航到相同路由，报错"NavigationDuplicated: Avoided redundant navigation to current location: " 报错提示：避免重复路由； 原因：在页面上重复进入了相同的路由； 解决：主要有3种方案，如下（对于repalce方法也同样适用）： 直接在路由跳转的部分加上'.catch(()=>{})'，这可以避免显示错误，因为浏览器认为异常已被处理。 在定义路由时候加上全局捕获.
vue-router 采坑记录
Q1761991696的专栏
10-12 2469
一、错误：Uncaught Error: [vue-router] route config "component" for path: /detail cannot be a string id. Use an actual component instead. 解决方案：路由配置中 import Detail from './components/detail.vue'; const routers = [ ...... { path:'/detail', ...
Vue-router 报NavigationDuplicated的可能解决方案
Mm_Dxx的博客
04-16 308
今天在做tabbar的时候，遇到一个问题，页面虽然能够成功跳转，但是控制台报了一个Uncaught (in promise)的错误，多次点击时报错[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。查了资料，发现原因是在于Vue-router在3.1之后把$router.push(...
Uncaught (in promise) Error: Navigation cancelled from “/“ to “/login“ with a new navigation.解决方案
最新发布
m0_46165586的博客
09-27 868
路由跳转`控制台提示：Uncaught (in promise) Error: Navigation cancelled from "/" to "/login" with a new navigation.`通常是因为在路由跳转过程中，某个导航被取消了。
vue项目 NavigationDuplicated 错误
cmmboy1990的博客
07-21 197
NavigationDuplicated: Avoided redundant navigation to current location… 1.原因：element-ui多次点击导航（多次push同一个路由），会报错 2.解决：在router index,js 中加入代码： const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return origina
vue 路由 NavigationDupLicated 解决
weixin_45802907的博客
12-08 834
vue 路由 NavigationDupLicated 解决 编程式路由跳转到当前路由(参数不变)，多次执行会抛出 NavigationDupLicated 的警告错误。怎么解决 为什么编程式导航进行路由跳转的时候，就会有这种警告错误呢 因为 vue-router:3.5.3 版本引入了 promise，假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。 解决方法 方法一 运用编程式路由的时候加上成功，失败的回调 this.$router.push( { name: "
vue-router.js:2071 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to curre
年少不知曲中意,再听已是曲终人
04-30 399
vue-router.js:2071 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/register".
关于产生冗余导航，vue-router报错的问题
weixin_43786395的博客
02-16 1094
项目场景： 写编程式路由导航时，vue-router报错。 问题描述： Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home/message/detail?id=003&title=%E6%B6%88%E6%81%AF003". at createRouterError (webpack-internal:///./node_modules/
解决vue-router跳转重复路径报错问题
weixin_45932733的博客
12-02 3042
在最近写代码时发现，我的路由跳转重复路径后，报错如下,问题可能是官方当前版本问题，所以解决方案如下 let path = this.$route.path let newpath = "/home" if (path ==!newpath) { this.$router.push(newpath) } Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".
Vue-router报NavigationDuplicated错误的解决方法
qq_42551543的博客
12-21 306
Vue-router报NavigationDuplicated错误的解决方法
vue-router报NavigationDuped错误，以及重写$router.push与$router.replace方法
QZ9420的博客
12-06 875
问题： 编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuped的警告错误 ===>>>路由跳转有两种形式：声明式导航、编程式导航 ===>>>声明式导航是没有这种问题的，因为vue-router底层已经处理好了 问题的产生原因 “vue-router”: “^3.5.3”：最新的vue-router引入了promise 解决方案 1、通过给push或者replace方法传递相应的成功、失败的回调函数，可以捕捉到当前错误，即可解决 this.$r
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.
解决 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 跳转异常 Error: Navigation cancelled from “/“ to “/home“ with a new navigation.
热门推荐
csdn_aspnet的专栏
08-28 4万+
2、vue-router@3.0版本及以上回调形式已经改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告 （注：3.0以下版本则不会出现以下警告！在main.js下注册一个全局函数即可 （注：此处理方案只针对于vue-router 3.0以上版本哈！注：官方vue-router@3.0及以上新版本路由默认回调返回的都是promise，原先就版本的路由回调将废弃！安装 npm install vue-router@2。
解决 vue-router 报 NavigationDuplicated 错误
wang_xiao_ye的博客
11-29 6079
解决 vue-router 报 NavigationDuplicated 错误 控制台报错： 原因： vue-router 在3.1版本以后将 $router.push()、 $router.replace() 方法改为了 Promise，假如没有回调函数，错误信息就会交给全局的路由错误处理。如截图：Uncaught (in promise) 方案1： 降版 npm i vue-router@3...
vue-router详细教程：安装与基本用法
"本文将详细介绍如何使用vue-router插件，以帮助读者理解并掌握在Vue.js项目中实现页面路由管理的技巧。" Vue.js是一个流行的前端JavaScript框架，它提供了便捷的方式来构建用户界面。然而，当项目变得复杂时，管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值