Vue菜单导航组件的实用入门指南

在开发办公类Web应用时，一个清晰直观的菜单导航能极大提升用户的操作效率。比如在企业后台管理系统中，财务人员需要快速切换报销审批、账单查询、预算管理等模块，这时候用Vue实现一个响应式的菜单导航组件就显得特别实用。

为什么选择Vue做菜单导航

Vue的响应式数据和组件化结构非常适合构建动态菜单。你可以把菜单项定义成数据，通过v-for循环渲染，点击展开或收起子菜单时，状态变化会自动更新界面，不用手动操作DOM。

基础菜单结构示例

下面是一个简单的侧边栏菜单组件，支持多级嵌套：

<template>
  <div class="sidebar-menu">
    <div 
      v-for="item in menuList" 
      :key="item.id"
      class="menu-item"
    >
      <div @click="toggleSubMenu(item)" class="menu-title">
        {{ item.title }}
      </div>
      <div v-show="item.expanded" class="sub-menu">
        <div 
          v-for="subItem in item.children" 
          :key="subItem.id"
          class="sub-item"
        >
          {{ subItem.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          id: 1,
          title: '文档管理',
          expanded: false,
          children: [
            { id: 11, title: '新建文档' },
            { id: 12, title: '历史版本' }
          ]
        },
        {
          id: 2,
          title: '审批流程',
          expanded: false,
          children: [
            { id: 21, title: '待办事项' },
            { id: 22, title: '已处理' }
          ]
        }
      ]
    };
  },
  methods: {
    toggleSubMenu(item) {
      item.expanded = !item.expanded;
    }
  }
};
</script>

添加当前选中状态

用户点进某个页面后，菜单最好能高亮当前项。可以加一个 activeId 记录当前激活的菜单ID，然后用:class绑定样式：

<div 
  v-for="subItem in item.children" 
  :key="subItem.id"
  class="sub-item"
  :class="{ active: activeId === subItem.id }"
  @click="selectMenu(subItem.id)"
>
  {{ subItem.title }}
</div>

在methods里加上选中逻辑：

selectMenu(id) {
  this.activeId = id;
  // 可以配合Vue Router跳转页面
}

结合实际场景优化体验

在日常办公系统中，不同角色看到的菜单可能不一样。比如普通员工看不到人事管理入口。这时可以把菜单数据从接口获取，根据登录用户的角色动态生成菜单列表，只需更新data里的menuList，界面就会自动刷新。

如果菜单层级较多，还可以加入折叠功能，点击标题栏收缩整个侧边栏，给主内容区留出更多空间。这种交互在屏幕较小的笔记本上特别有用。