企业官网建设流程全解析

若依Vue3后台管理系统左侧菜单优化实战：默认展开配置全解析

在开发企业级后台管理系统时，导航菜单的交互体验直接影响用户操作效率。若依（Ruoyi）作为国内流行的开源后台框架，其Vue3版本提供了高度可定制的菜单系统。本文将深入探讨如何通过代码调整实现左侧菜单的默认展开效果，帮助开发者提升系统易用性。

1. 理解若依Vue3的菜单工作机制

若依Vue3的菜单系统基于Element Plus的el-menu组件构建，通过路由配置自动生成导航结构。默认情况下，所有一级菜单都是折叠状态，需要用户手动点击展开。这种设计虽然简洁，但对于高频使用的功能模块却增加了操作步骤。

核心实现原理：

• 路由信息存储在Vuex中，通过sidebarRouters计算属性获取
• Sidebar组件负责渲染整个菜单容器
• SidebarItem组件递归处理多级菜单的渲染
• default-openeds属性控制默认展开的菜单项

提示：修改前建议备份原始文件，避免意外情况导致系统无法正常运行

2. 核心文件修改步骤详解

2.1 修改Sidebar/index.vue文件

这个文件是菜单系统的入口组件，我们需要在这里设置默认展开的菜单项。以下是关键修改点：

<script> export default { data() { return { arr: ['/system', '/tool', '/monitor'], // 需要展开的一级菜单路径数组 } }, // 其他原有代码保持不变... } </script>

同时需要在模板中添加default-openeds属性绑定：

<el-menu :default-openeds="arr" <!-- 其他原有属性保持不变 --> > <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" :arrIndex="route.path" // 新增的属性传递 /> </el-menu>

2.2 调整SidebarItem.vue组件

为了使默认展开功能正常工作，我们需要对菜单项组件进行适配修改：

<script setup> const props = defineProps({ // 原有props保持不变... arrIndex: { // 新增的arrIndex属性 type: String, default: '' } }) </script> <template> <!-- 修改el-menu-item的index绑定 --> <el-menu-item :index="arrIndex"> <!-- 原有内容保持不变 --> </el-menu-item> <!-- 修改el-sub-menu的index绑定 --> <el-sub-menu :index="arrIndex"> <!-- 原有内容保持不变 --> </el-sub-menu> </template>

3. 自定义展开菜单的实用技巧

3.1 确定需要展开的菜单路径

获取准确的一级菜单路径是配置成功的关键。推荐以下方法：

1. 控制台调试法：

   • 打开浏览器开发者工具
   • 在控制台输入：document.querySelectorAll('.el-sub-menu__title')
   • 查看各菜单项的>created() { // 根据用户角色动态设置展开菜单 const userRoles = this.$store.state.user.roles this.arr = ['/system'] // 基础菜单 if (userRoles.includes('admin')) { this.arr.push('/monitor', '/tool') } if (userRoles.includes('audit')) { this.arr.push('/log') } }

     4. 常见问题与解决方案

     4.1 菜单展开状态不生效的可能原因

     问题现象	排查步骤	解决方案
     菜单完全不展开	1. 检查arr数组是否包含有效路径 2. 确认路径是否与路由配置一致	确保路径以斜杠开头，如'/system'
     部分菜单不展开	1. 检查对应路由的hidden属性 2. 确认meta中是否有特殊配置	排除hidden: true的路由
     刷新后状态丢失	1. 检查是否意外重置了arr数组 2. 确认Vuex状态是否持久化	使用localStorage备份展开状态

     4.2 性能优化建议

     当菜单项较多时，默认展开所有菜单可能导致性能问题。可以通过以下方式优化：

     1. 分模块懒加载：

     // 只展开当前活跃模块 computed: { activeModule() { const path = this.$route.path return '/' + path.split('/')[1] } }, created() { this.arr = [this.activeModule] }

     2. 使用防抖处理：

     import { debounce } from 'lodash' created() { this.setDefaultOpeneds = debounce(() => { this.arr = ['/system', '/tool'] }, 300) this.setDefaultOpeneds() }

     5. 扩展应用：记住用户菜单偏好

     提升用户体验的进阶方案是实现菜单展开状态的记忆功能：

     // 在Sidebar/index.vue中添加 watch: { arr: { handler(newVal) { localStorage.setItem('menuOpenedState', JSON.stringify(newVal)) }, deep: true } }, created() { const savedState = localStorage.getItem('menuOpenedState') this.arr = savedState ? JSON.parse(savedState) : ['/system'] }

     这种实现方式可以让系统记住用户最后一次的菜单展开状态，下次访问时自动恢复。

     6. 样式调整与视觉优化

     默认展开菜单后，可能需要调整一些样式以保证视觉效果：

     // 在Sidebar/index.vue的style部分添加 .el-menu { // 调整子菜单缩进 .el-menu-item { padding-left: 50px !important; } // 展开状态下的菜单标题样式 .el-sub-menu.is-opened > .el-sub-menu__title { color: #409EFF !important; } } // 调整菜单项悬停效果 .el-menu-item:hover { background-color: rgba(64, 158, 255, 0.1); }

     这些样式微调可以让展开后的菜单层级关系更清晰，提升视觉引导效果。

     实际项目中，我们还需要考虑响应式布局下的菜单表现。在小屏幕设备上，可能需要禁用默认展开功能：

     computed: { shouldOpenByDefault() { return window.innerWidth > 992 // 只在桌面端生效 } }, created() { this.arr = this.shouldOpenByDefault ? ['/system'] : [] }

     通过媒体查询和条件判断，可以确保在各种设备上都能提供最佳的用户体验。