element ui 存在子菜单时如何点击父菜单并跳转

项目场景：

提示：根据原型图在后台管理页面中一个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的博客-优快云博客

https://blog.youkuaiyun.com/qq_34838046/article/details/108950944【vue】【element-ui】【错误记录】vue使用element-ui时，.native点击事件触发两次_前端二狗子的博客-优快云博客