Element Plus 的 el-menu 组件在使用 router 属性时,内部会处理路由导航逻辑。
### 🔍 问题原因
Element Plus 的 el-menu 组件在使用 router 属性时,内部会处理路由导航逻辑。当点击菜单项时,组件内部的路由处理与外部 handleSelect 方法中的 router.push() 产生冲突,导致组件重新渲染,从而重置了侧边栏的折叠状态。
### ✅ 修复方案
将 el-menu 的 router 属性从 true 改为 false ,完全由 handleSelect 方法控制路由导航:
<!-- 修改前 --> <el-menu ... router @select="handleSelect" > <!-- 修改后 --> <el-menu ... :router="false" @select="handleSelect" >
### 📁 修改的文件
- Layout.vue :将 router 改为 :router="false"
### ✅ 验证结果
1. 折叠状态保持 :点击菜单项时侧边栏保持折叠状态
2. 导航功能正常 :菜单项点击仍能正确跳转页面
3. 手动展开/收起 :底部折叠按钮功能正常
4. 报警徽章显示 :在不同状态下都能正确显示
5. 响应式布局 :在不同屏幕尺寸下表现正常
现在侧边栏的交互体验已符合预期!

浙公网安备 33010602011771号