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

目录
  • ElementUI 导航栏重复点菜单报错
  • ElementUI 菜单导航重定向报错处理

ElementUI 导航栏重复点菜单报错

在使用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)
}

问题即可解决。

ElementUI 菜单导航重定向报错处理

当我们使用ElementUI中的菜单导航时，配置好菜单路由后，重复点击同一个菜单项会报错，如下：

Error: Avoided redundant navigation to current location: “/xxx”.

还有一个错误是，我配置了一个路由守卫，当用户还没有登录的时候，点击菜单项时，如果没有登录则会跳转至登录页面进行登录，这时页面可以正常跳转但是也会报出错误，如下：

Error: Redirected when going from “/xxx” to “/yyy” via a navigation guard.

这个问题困扰了我两天，查了一些资料也没有解决，直到看到一个文章，写的是解决第一个问题的方法，如下：

import VueRouter from 'vue-router'
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

在引入vue-router的地方加入此代码块，就能解决重复点击同一菜单项的报错，但是神奇的是，我的第二个问题也因此解决了。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Element-ui NavMenu子菜单使用递归生成时使用报错

    当采用递归方式生成导航栏的子菜单时,菜单可以正常生成,但是当鼠标hover时,会出现循环调用某个(mouseenter)事件,导致最后报错 处理方式 注:2.13.2 版本,只需对子菜单设置属性 :popper-append-to-body="false" 就不会出现这个问题了 报错信息如下: Uncaught RangeError: Maximum call stack size exceeded.     at VueComponent.handleMouseenter (inde

  • 在uni-app中使用element-ui的方法与报错解决

    uni-app的相关UI组件库中可能会没有你想要的功能组件,自己去开发的话需要花很多时间,此时咱们可以将别的UI组件库给安装到uni-app中来,达到直接使用该UI组件库的功能组件,例如,安装element-ui uni-app使用element-ui需安装以下插件 npm i element-ui -S 按需引入组件需要装以下插件 npm install babel-plugin-component -D 当你安装完以上插件后,需要在main.js中进行引入,例如引入全部: import Vu

  • Vue使用element-ui实现菜单导航

    Vue使用element-ui实现菜单导航

    本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码,供大家参考,具体内容如下 效果图 目录截图 安装vue-router 和 element-ui vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库 npm install vue-router --save npm install element-ui --save 关闭ESLint检查 新增配置文件src/vue.config.js 文件 module.exports = { lint

  • elementUI中MENU菜单踩坑

    需求:点击当前页面的按钮跳转到首页,给menu中绑定的default-active赋值 问题:页面已经跳转过去,可menu选中项根本没有发生变化 解决办法: 直接将当前页面的路由绑定到default-active上,同时将index改为当前路由,这样在通过非点击导航菜单跳转页面时就不需要再来手动改变导航菜单的选中项了,它会自己选中当前页面的tab项,完美解决! 说明:router属性很重要,default-active="this.$route.path"也很重要. <el-me

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

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

    目录 ElementUI 导航栏重复点菜单报错 ElementUI 菜单导航重定向报错处理 ElementUI 导航栏重复点菜单报错 在使用ElementUI中的导航时,默认情况下如果重复点击某选项,会报错. element-ui.common.js?b705:3354 Error: Avoided redundant navigation to current location: “/home/home1”.at createRouterError (vue-router.esm.js?8c4

  • 解决bootstrap导航栏navbar在IE8上存在缺陷的方法

    解决bootstrap导航栏navbar在IE8上存在缺陷的方法

    在Bootstrap的官网上,提供了一种导航栏的组件: 只要在站点文件夹放好JQ与Bootstrap输入如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • php+jQuery实现的三级导航栏下拉菜单显示效果

    php+jQuery实现的三级导航栏下拉菜单显示效果

    本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(

  • Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果

    Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. $(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); })

  • JavaScript实现HTML导航栏下拉菜单

    JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐.其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素,选择器优先级等等.废话不多说,直接看效果! 样式有点丑. 代码实现(JavaScript) 1.获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById("show&quo

  • vue实现导航栏下拉菜单

    本文实例为大家分享了vue实现导航栏下拉菜单的具体代码,供大家参考,具体内容如下 先看效果: 下拉菜单铺满全屏 <div class="nav">...</div> <div class="dropdown-content">...</div> .nav {     position: relative; } .dropdown-content {     position: absolute;     width:

  • 解决安装python库时windows error5 报错的问题

    python安装库时,有时候会报错windows error 5,可以尝试关闭所有使用python的编辑器.文件等,然后重新pip安装,如果还是不行,可以将报错最下层文件删除即可(如果不放心可以将该文件先备份),记录之~ windows error错误代码: windows error错误代码: 0操作成功完成. 1功能错误. 2系统找不到指定的文件. 3系统找不到指定的路径. 4系统无法打开文件. 5拒绝访问. 6句柄无效. 7存储控制块被损坏. 8存储空间不足,无法处理此命令. 9存储控制块

  • 解决Python中字符串和数字拼接报错的方法

    解决Python中字符串和数字拼接报错的方法

    前言 众所周知Python不像JS或者PHP这种弱类型语言里在字符串连接时会自动转换类型,如果直接将字符串和数字拼接会直接报错. 如以下的代码: # coding=utf8 str = '你的分数是:' num = 82 text = str+num+'分 | 琼台博客' print text 执行结果 直接报错:TypeError: cannot concatenate 'str' and 'int' objects 解决这个方法只有提前把num转换为字符串类型,可以使用bytes函数把int

  • 解决laravel5.4下的group by报错的问题

    使用ORM查询数据显示这个错,这是因为laravel使用了开启了mysql的严格模式所以 如果要关闭的话,我们需要找到config/database.php这个文件,然后将 mysql下的这个改为false;就会关闭. 既然说严格模式那什么是样模式呢.据我所知在mysql在5.7有一个尿性 [报错:only_full_group_by],就是你group by的数据里面必须包含你查询的数据,意思就是如果你的sql是:select name,age from user group by name;

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

随机推荐