Vue-router 报NavigationDuplicated解决方案

最新推荐文章于 2022-09-28 20:25:43 发布
最新推荐文章于 2022-09-28 20:25:43 发布
阅读量897 收藏
点赞数 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})
Cookysurongbin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-router 报错NavigationDuplicated的解决方法
10-15
主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter基本 Taro ，扩展成 vue-router 的使用体验Installationnpm i vue-taro-router -SUsage// router.jsimport VueTaroRouter from "vue-taro-router";const router = new VueTaroRouter();// 添加拦截器...
Vue-router 报NavigationDuplicated的可能解决方案
Mm_Dxx的博客
04-16 268
今天在做tabbar的时候，遇到一个问题，页面虽然能够成功跳转，但是控制台报了一个Uncaught (in promise)的错误，多次点击时报错[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。查了资料，发现原因是在于Vue-router在3.1之后把$router.push(...
vue项目 NavigationDuplicated 错误
cmmboy1990的博客
07-21 177
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 628
vue 路由 NavigationDupLicated 解决 编程式路由跳转到当前路由(参数不变)，多次执行会抛出 NavigationDupLicated 的警告错误。怎么解决 为什么编程式导航进行路由跳转的时候，就会有这种警告错误呢 因为 vue-router:3.5.3 版本引入了 promise，假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。 解决方法 方法一 运用编程式路由的时候加上成功，失败的回调 this.$router.push( { name: "
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue-router报NavigationDuplicated错误的解决方法
qq_42551543的博客
12-21 269
Vue-router报NavigationDuplicated错误的解决方法
Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
热门推荐
背心的博客
09-28 5万+
Vue路由跳转报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
解决 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 报错：Navigation cancelled from“/...“ to “/...“ with a new navigation.
weixin_47084275的博客
08-24 2万+
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报NavigationDuplicated: Avoided redundant navigation to current location 的问题
weixin_43340295的博客
12-19 776
vue-router重复触发了同一个路由导致报错 vue-router的报错，报错原因是重复触发了同一个路由。 解决方法是在router /index的页面里面加入以下代码： const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location: “/login“ 的问题
adele_viv的博客
03-05 4170
一、普遍问题解决方法 import Router from 'vue-router'; Vue.use(Router); // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(er..
解决vue-router 中，重复点击同一个路由，控制台报错："Navigating to current location (XXX) is not allowed"
Jane_96的博客
12-06 1002
解决方式： 在push语句中添加catch捕捉错误 router.push('your-path').catch(err => {}) 详细信息： https://github.com/vuejs/vue-router/issues/2872
vue.js学习笔记三十——webpack使用vue-router
武汉小喽啰
08-12 425
1. 安装vue-router环境 npm i vue-router 2. 使用vue-router 2.1 导包 import Vue from 'vue'; import VueRooter from 'vue-router'; 2.2 调用 如果在一个模块化工程中使用它，必须通过Vue.use()明确的安装路由功能： Vue.use(VueRooter ); 注意：如果使用...
vue-router import 报错
最新发布
12-05
当我们在Vue项目中使用vue-router时，经常会遇到import报错的问题。...总的来说，解决vue-router import报错的问题需要我们确认导入方式、重新安装vue-router、检查版本匹配等步骤来逐一排查问题，最终找到解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值