Vue router / Element 重复点击导航路由报错解决方法

最新推荐文章于 2023-04-04 10:25:56 发布
最新推荐文章于 2023-04-04 10:25:56 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsh159745/article/details/105747057
版权
本文介绍在Vue项目中使用Element-ui时，遇到重复点击导航路由导致的错误及其解决办法。包括删除node_modules重装依赖、升级vue-router到3.1.1以上版本或在main.js或router.js中添加特定代码来避免错误。
摘要由CSDN通过智能技术生成

写 Vue 项目中，使用 Element-ui 重复点击导航路由会报错，报错信息如下：

在这里插入图片描述

虽然此报错并不会影响项目运行，但是作为一个强迫症的码农的确受不了error，解决方法如下：

方法①：把项目依赖的 node_modules 文件夹删除， 然后再 npm install 重新下载依赖包，如果安装的 vue-router 还是之前出错的那个版本，在项目目录下运行 npm i vue-router@3.0 -S 重新下载未出错版本即可；
在这里插入图片描述

提示：vue-router 官方在 2019-08-06 推出的 vue-router@3.1.1 已经修复了此 bug，目前安装 3.1.1 以上的 vue-router 版本既可解决此报错。

备注：官方上确实展示目前版本已修复了此问题，不知为何有些高版本的vue-router还是会报错，这种情况下建议大家采用方法二，即可解决此问题。

方法②：不想更换 vue-router 的版本亦可，在 main.js 或 router.js 中添加以下代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4JqhadkQ-1587785779545)(https://blog.csdn.net/l508742729/article/details/102526293)]

最低0.47元/天 解锁文章
昊哥的HelloWorld
关注
vue+Vue Router多级侧导航切换路由(页面)的实现代码
10-17
创建侧导航组件`SideMenu.vue`，并在其中利用`el-menu`来自Element UI组件库来构建一个具有多级结构的导航菜单。子页面组件则创建在`components/page`目录下。 4. 在父组件中引用侧导航和子页面 在`App.vue`中，...
vue+element导航+标签导航+路由跳转+路由转换.zip
05-21
vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047
vue 解决addRoutes多次添加路由重复的操作
10-14
主要介绍了vue 解决addRoutes多次添加路由重复的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue element导航重复点击路由报错
m0_49014616的博客
01-07 267
1.js写法 import Router from ‘vue-router’ Vue.use(Router) const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) } 2.ts写法 import Router from ‘vue-router’ V
vue 重复点击菜单，路由重复报错
pinbolei的博客
04-12 839
报错信息 vue-router在3.0版本以上时，重复点菜单，控制台会报错，虽然不影响使用，但是最好处理下这个问题，不然也可能会影响调试其他问题。 报错原因 vue-router在3.0版本以上时 ，回调形式改成了promise api，返回的是promise，如果没有捕获到错误，控制台始终会出现如上图的报错 node_module/vue-router/dist/vue-router.js 搜VueRouter.prototype.push 解决方法 1.降低vue-router的版本 npm i v
vue 解决重复点击导航路由报错 问题
xiaofang_z的博客
06-15 431
// 解决重复点击导航路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err) } Vue.use(VueRouter) 直接复制到router.js里，粘贴的时候，注意下执行顺序，这段是放在new VueRouter的前面 .
Vue及element-ui路由重复点击报错问题解决？
m0_53738303的博客
11-02 647
在做coderwhy的仿蘑菇街项目出现路由重复点击报错： 经过搜索，使用以下方法依然无法解决，私以为是路由版本问题，我的路由是3.5.2版本 /* 针对路由push 重复点击报错解决方案 */ const originPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originPush.call(this, location).catch(err =&.
Vue-router 报错NavigationDuplicated的解决方法
11-21
使用push()、replace()进行导航时，不能重复导航到当前路由。 解决办法： 方法1：在定义路由的文件中router/index.js const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push ...
vue+element导航栏高亮显示的解决方式
10-16
6. 根据Element UI的文档，组件的router属性可以直接使用Vue Router实例，这样组件内部会自动处理路由变化，并同步更新导航栏的高亮状态。 ```javascript // router.js配置示例 import Vue from 'vue'; import ...
Vue解决重复点击导航栏,控制台报错
weixin_45616246的博客
08-20 415
在router文件夹下的路由文件中添加一下代码: const originalPush = VueRouter.prototype.push VueRouter.prototype.push= function push(location) { return originalPush.call(this, location).catch(err => err) } 如果还是无法解决,则改成replace,再试一试: const originalReplace = VueRouter.prot
手动配置 react-router-dom时报错，You should not use withRouter(Home)
Xpy 的博客
04-15 640
一、问题场景： 在组件中想使用函数式路由跳转，根据官方文档查到：需要在该组件导出时 使用 withRouter(组件) 包裹组件；但是报错了！？ 官方文档 https://reactrouter.com/web/api/matchPath You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter wi
elementUI 接口错误提示多次弹出
最新发布
weixin_40918145的博客
04-04 751
最近项目遇到问题——报错信息过多提示，如下图所示： 解决方法如下：新建js文件(文件具体位置自己放，我放在下面) 局部调用 全局调用main.js中引入上面文件 使用
element组件遇到的问题及解决方案
L_C_sunny的博客
06-17 478
1.Vue中input被赋值后，无法再修改编辑的问题解决 第一种方案：属性名并未声明,因此Vue就无法对属性执行 getter/setter 转化过程，导致xx属性不是响应式的，因此无法触发视图更新。解决的方式有两种，第一种就是显示的声明formInline这个对象的属性 第二种方案： 使用Vue的全局API: $set()赋值 this.$set(this.xxx, 'xxx', xxx) 2.多个el-form表单，表单验证的功能无效 多个el-form表单，:model="ruleForm" r
使用router.push方法跳转 点击两三次后 再点击页面就不会发生变化 原因竟然只是一个页面中data没有加return {}
q1399969212的博客
12-12 1008
使用router.push方法跳转 点击两三次后 再点击页面就不会发生变化 原因竟然只是vue页面中data没有加return {}导致
vue重复路由报错解决
Toozky的博客
01-22 1901
vue重复路由报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation…
同一个路由重复点击报错的解决方法
qq_26841153的博客
04-15 586
vue路由重复点击
记录项目在使用vue-router时遇到的问题
weixin_45121510的博客
02-18 415
App.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'app', components: { } } </script> main.js 入口文件 import Vue from 'vue' import App
vue 解决重复点击导航路由报错
k250119101的博客
02-11 2356
import Router from ‘vue-router’ // 解决重复点击导航路由报错 const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err =>...
vue路由 重复点击同一个路由报错 如何解决？
ksyjy的博客
05-19 1118
Element-ui 重复点击同一个路由 会报错:NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”} 解决办法： 在router/index.js里重写Router.prototype.push import Router from 'vue-router' //需要添加的代码 const originalPush = Router.prototype.push; Router.pro
Vue+Element 实现动态加载三级菜单路由方法
本文将介绍如何在Vue.js项目中结合Element UI库，通过动态加载路由的方式来实现一个包含三级菜单的页面显示。这种方法通常用于构建单页应用（SPA），以提高用户体验并优化页面加载效率。 在Vue.js中，动态加载路由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值