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. 响应式布局 :在不同屏幕尺寸下表现正常
现在侧边栏的交互体验已符合预期!

posted @ 2026-03-04 09:29  ZaraNet  阅读(1)  评论(0)    收藏  举报