使用el-menu做侧边栏导航遇到需要点击两次菜单才展开

在使用Vue和el-menu组件构建侧边栏导航时,遇到一个bug:首次点击菜单不会展开,需要点击两次。问题根源在于`default-active`和`el-submenu`的`index`不匹配,同时使用了`default-openeds`。删除`default-openeds`属性并确保路由`name`设置正确,解决了这个问题。此外,为了避免隐藏路由(如404、login)出现在侧边栏,需要在`sideMenus.vue`中递归处理隐藏路由。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在根据路由遍历生成侧边导航栏时,遇到一个问题,就是当我点击选中某个垂直菜单时,只有点击第二次它才会展开,第一次在选中垂直菜单之后垂直菜单它就收缩起来了,如下图:
在这里插入图片描述
如上图,在我第一次点击选中“告警管理”这个菜单的时候,外联监测它会立马收缩起来,当我第二次点击时就不会收缩,而是展开状态,这是因为我的el-menu里default-active和el-submenu的index及el-menu-item的index属性不一致导致的,default-openeds和default-active尽量不要同时存在,删掉default-openeds即可,路由里name都一定要写上,不然会在控制台报警告,如下截图:
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值