项目场景:
提示:根据原型图在后台管理页面中一个2级菜单下还存在3级菜单,2级菜单可以跳转到指定页面,3级也能。
问题描述
但是element ui中
el-menu如果存在子菜单父级菜单就不能发生路由跳转了,为了解决这个问题特此记录。
解决方案:
在sidebar-item中绑定 @click.native.prevent
再把路由信息,与当前被点击的元素的信息也发送到方法
<sidebar-item v-for="child in item.children" :key="child.path" class="nest-menu" @click.native.prevent="handleSelectMenu(child.path,$event.target.tagName)" />
// 因为需要点击电量报表又要点击电量报表下的子菜单 首先根据 电量报表的name判断 之后又因为这个事件会冒泡调用两次导致判断不准确,传入$event.target.tagName 获取当前点击的元素类型
handleSelectMenu(item, val) {
console.log('handleSelectMenu', item, val)
if (item == 'electricQuantity' && val == 'DIV') {
router.push({ name: 'electricQuantity' })
}
}
方法二:
把 @click.native.prevent 更换我 @click.native.stop 可以直接取消冒泡 就不会调用两次 可以直接通过名字判断
大家可以根据自己的需求进行尝试
参考
NavMenu导航菜单el-submenu点击事件及激活状态变化_A_Freeze的博客-CSDN博客
https://blog.csdn.net/qq_34838046/article/details/108950944【vue】【element-ui】【错误记录】vue使用element-ui时,.native点击事件触发两次_前端二狗子的博客-CSDN博客