解决elementUi使用导航菜单的时候,重复点击报错的问题

相信只要使用vue+elmentUI 做后台管理系统的 基本上都需要用到左侧导航栏

然后左侧导航栏和路由导航 联系在一起

默认它是不启用 路由关联的 这个时候我们得配置一下 才可以

给el-menu上面加一个  router的属性才可以 关联到

<el-menu :default-active="$router.currentRoute.path" router class="el-menu-slide">
</el-menu>

还有就是一个问题 就是重复点击导航的时候 就会报错

解决elementUi使用导航菜单的时候,重复点击报错的问题_第1张图片

虽然 不影响 项目的使用 但是对开发人员 很难受哈 特别是我这种强迫症患者

下面给出 解决方法
先给出 vue.ts 版本的
将下面的代码 放到 router/index.js 的new VueRouter() 上面 记住

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location:any) {
  return (originalPush.call(this, location) as any).catch((err:any) => err)
}
// 这个上面哈  
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:asyncRouterMap
})

vue.js版本 的

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location:any) {
  return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:asyncRouterMap
})

解决elementUi使用导航菜单的时候,重复点击报错的问题_第2张图片

你可能感兴趣的:(element,vue,javascript)