ElementUI使用导航菜单重复点击报错解决方法

element导航菜单标签使用

<el-menu 
    router 
    :default-active="$route.path" 
    class="el-menu-vertical-demo">
    <el-menu-item index="/home">
        <span slot="title" class="">
                Home
        span>
    el-menu-item>
el-menu>

• 给el-menu标签添加router属性可实现在el-menu-item标签通过index属性跳转到相应路由页面
  • 添加:default-active="$route.path" 可实现点击相应菜单使对应的菜单为选中状态

这样虽然实现了菜单功能，可是在点击同一个菜单时会报错

element-ui.common.js?5c96:3354 Error: Avoided redundant navigation to current location: "/dashboard".
    at createRouterError (vue-router.esm.js?8c4f:2062)
    at createNavigationDuplicatedError (vue-router.esm.js?8c4f:2035)
    at HTML5History.confirmTransition (vue-router.esm.js?8c4f:2195)
    at HTML5History.transitionTo (vue-router.esm.js?8c4f:2125)
    at HTML5History.push (vue-router.esm.js?8c4f:2492)
    at VueRouter.push (vue-router.esm.js?8c4f:2916)
    at VueComponent.routeToItem (element-ui.common.js?5c96:3381)
    at VueComponent.handleItemClick (element-ui.common.js?5c96:3348)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)

解决这个问题的方法

ts版本

// 在路由的index.ts文件中加入
// 代码插入到 new VueRouter()之前
const resolveOriginal = VueRouter.prototype.push
VueRouter.prototype.push = function push(location:any) {
  return (resolveOriginal.call(this, location) as any).catch((err:any) => err)
}

js版本

// 在路由的index.js文件中加入
// 代码插入到 new VueRouter()之前
const resolveOriginal = VueRouter.prototype.push
VueRouter.prototype.push = function push(location:any) {
  return resolveOriginal.call(this, location).catch(err => err)
}