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) }