解决ElementUI导航栏重复点菜单报错问题

前端不加班

于 2023-01-18 16:54:36 发布

阅读量913

点赞数 1

分类专栏：插件文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_49515138/article/details/128728174

版权

插件专栏收录该内容

2 篇文章

订阅专栏

在使用ElementUI的导航组件时，如果重复点击同一选项，可能会引发vue-router的错误。为了解决这个问题，可以在router的配置文件中覆盖VueRouter.prototype.push方法，添加错误处理来避免冗余导航。通过捕获并处理push操作的错误，可以防止导航到当前已有的位置时出现错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用ElementUI中的导航时，默认情况下如果重复点击某选项，会报错。

element-ui.common.js?b705:3354 Error: Avoided redundant navigation to current location: “/home/home1”.
at createRouterError (vue-router.esm.js?8c4f:2060)
at createNavigationDuplicatedError (vue-router.esm.js?8c4f:2033)
at HashHistory.confirmTransition (vue-router.esm.js?8c4f:2182)
at HashHistory.transitionTo (vue-router.esm.js?8c4f:2123)
at HashHistory.push (vue-router.esm.js?8c4f:2582)
at VueRouter.push (vue-router.esm.js?8c4f:2903)
at VueComponent.routeToItem (element-ui.common.js?b705:3381)
at VueComponent.handleItemClick (element-ui.common.js?b705:3348)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)

在这里插入图片描述
可以在router的配置文件中（router -> index.js）加上下面这句话，注意位置：

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}