Vue\Vue-router控制台报NavigationDuplicated的解决方法

最新推荐文章于 2024-04-22 10:01:45 发布
置顶 最新推荐文章于 2024-04-22 10:01:45 发布
阅读量769 收藏
点赞数
分类专栏： vue-router路由报错 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39927511/article/details/104657896
版权

在这里插入图片描述
最近在做公司一个用vue+element 搭建的项目，然后控制台一直报这个错，官网说是vue-router版本的原因
当升级到最新版本的时候，发现项目中动态渲染的element表格头就不能正常显示了
处理办法：
修改项目目录中的package.json以及packlagepackage-lock.json两个文件中的 element-ui 版本，确保版本一致

在这里插入图片描述在这里插入图片描述
修改完成后发现控制台还是报错，这时候需要重新安装vue-router
在安装的时候需要指定路由版本
cnpm/npm install vue-router@3.0 --save-dev
如果不指定路由版本的话会直接安装最近版本的路由
安装后重启项目就可以了
在这里插入图片描述
OK搞定，欢迎大佬交流指导

木子李一
关注
专栏目录
vue-router之解决addRoutes使用遇到的坑
10-15
在Vue Router中，`addRoutes`是一个非常实用的API，用于在应用运行时动态地添加路由。这在处理用户权限和动态菜单时尤其有用。在上述的场景中，开发者遇到了一个问题，即在用户退出并重新登录后，浏览器控制台会显示...
Vue-router报NavigationDuplicated错误的解决方法
qq_42551543的博客
12-21 295
Vue-router报NavigationDuplicated错误的解决方法
vue-navigation一个原生路由插件
Cool的博客
05-27 1万+
github:https://github.com/zack24q/vue-navigation     需要 vue 2.x 与 vue-router 2.x。     导航默认行为类似手机APP的页面导航（A、B、C为页面）： A前进到B，再前进到C； C返回到B时，B会从缓存中恢复； B再次前进到C，C会重新生成，不会从缓存中恢复； C前进到A，A会生成，现在路由中包...
已解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题
最新发布
小威的博客
04-22 1万+
前几天在朋友的项目报了如标题所示的错误，之前我也遇到过，所有写此篇文章记录一下。在Vue.js项目中，使用vue-router进行路由管理时，有时会遇到的警告信息。这个警告通常发生在尝试导航到当前已经激活的路由时，vue-router为了避免不必要的导航操作而发出的。虽然这通常不会影响到应用的正常功能，但过多的冗余导航可能会引发性能问题或者调试上的困扰。
使用navigator对象信息对浏览器进行判断 （vue-route 的 beforeEach 实现导航守卫（路由跳转前验证登录））
岁末zzz的博客
02-23 1262
路由跳转前做一些验证，比如登录验证（未登录去登录页），是网站中的普遍需求。对此，vue-route 提供的导航守卫可以实现 官方文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ......
Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location
qq_61869009的博客
12-19 1321
使用this.$router.push()进行跳转时多次点击报错。2.修改VueRouter原型对象上的push方法。在router-> index.js中添加。1.跳转时添加回调函数。
解决Vue-Router升级导致的Uncaught (in promise)问题
11-19
另一种解决方案是对Vue-Router的原型链上的`push`和`replace`方法进行重写，确保每次调用都自动捕获异常，如下所示： ```javascript import Router from 'vue-router' const originalPush = Router.prototype....
VUE开发者工具，vue-devtools-4.1.4_0。
04-16
5. **Vue Router信息**：如果项目使用了Vue Router，DevTools会显示当前路由信息，便于追踪路由变化。 6. **Vuex状态管理**：对于使用Vuex的项目，DevTools提供了一个专门的Vuex面板，可以查看store的状态、提交...
Vue路由导航报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
背心的博客
09-28 5万+
Vue路由跳转报错：NavigationDuplicated: Avoided redundant navigation to current location解决方法
解决 vue-router 报 NavigationDuplicated 错误
wang_xiao_ye的博客
11-29 6030
解决 vue-router 报 NavigationDuplicated 错误 控制台报错： 原因： vue-router 在3.1版本以后将 $router.push()、 $router.replace() 方法改为了 Promise，假如没有回调函数，错误信息就会交给全局的路由错误处理。如截图：Uncaught (in promise) 方案1： 降版 npm i vue-router@3...
vuejs/vue-router 路由跳转 NavigationDuplicated 异常
富婆抱抱我
08-21 5814
vuejs/vue-router 异常报错 NavigationDuplicated出现场景版本解决方法 出现场景 使用vue-router进行路由跳转（Element也出现该问题是因为Element也使用了vue-router）。 使用 $router.replace 或 $router.push 跳转相同路径，两次或以上 版本 vue-router 3.1 解决方法 目前该问题为...
vue路由切换时NavigationDuplicated报错的解决方法
xm2by的博客
01-16 1536
vue路由切换时NavigationDuplicated报错的解决方法 在vue中使用this.$router.push()方法切换路由时，有时控制台会报NavigationDuplicated相关的错误，如下图所示： 原因： 在网上查询一番后，比较多的一种说法是，vue-router在3.1之后把$router.push()方法改为了Promise，因此在使用$router.push()时如果...
vue router 报错： Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
热门推荐
weixin_43202608的博客
08-08 5万+
今天在写项目时发现了在点击 router-link 会造成报错的问题， 报错内容为： 废话不多说，解决方法很简单，把项目依赖的 node_modules 文件夹删除， 然后再 npm install 重新下载依赖包就可以解决。 ...
Vue-router 报NavigationDuplicated的可能解决方案
dixie2009的博客
09-24 2179
出现这个问题，控制台会报[NavigationDuplicated{_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。 如果你仔细观察并...
关于Vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
迈向前端攻城狮的路上
09-10 6688
在使用Element UI 时点击同一个路由，页面报错 解决方法如下： 在引用vue-router的文件中添加一段代码 const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location)....
重写vue-router的push|replace方法解决NavigationDuplicated报错
yuanwen52的博客
12-22 840
在路由定义的地方，增加如下代码，如下只有push方法的重写，同理，replace方法也一样。 const originPush = VueRouter.prototype.push; VueRouter.prototype.push = function(location,resolve,reject){ if(resolve && reject){ originPush.call(this,location,resolve,reject); } else { o
VUE解决路由跳转时的NavigationDuplicated错误
DLwl7798的博客
03-10 380
问题: 编程式路由跳转到当前路径且参数没有变化时会抛出 NavigationDuplicated 错误 原因分析:
解决vue-router按需加载component: () => import()报错
这种写法更简洁，但可能会遇到npm run dev时控制台报`SyntaxError: Unexpected token`的错误，原因在于Babel不支持动态导入（dynamic import）的语法。为了解决这个问题，需要安装Babel的一个插件——`babel-plugin-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值