vue实现2级导航

实现二级导航的基本结构

使用 Vue 的组件化特性，通过嵌套的 v-for 循环渲染一级和二级菜单。数据通常以树形结构存储，例如：

data() {
  return {
    menus: [
      {
        title: "一级菜单1",
        children: [
          { title: "二级菜单1-1" },
          { title: "二级菜单1-2" }
        ]
      },
      {
        title: "一级菜单2",
        children: [
          { title: "二级菜单2-1" }
        ]
      }
    ]
  }
}

模板渲染逻辑

在模板中通过双重 v-for 实现层级渲染，结合 v-show 或 v-if 控制二级菜单的显示/隐藏：

<template>
  <div class="nav-container">
    <div v-for="(menu, index) in menus" :key="index" class="nav-item">
      <div @click="toggleSubMenu(index)">{{ menu.title }}</div>
      <div v-show="activeIndex === index" class="sub-menu">
        <div v-for="(subMenu, subIndex) in menu.children" :key="subIndex">
          {{ subMenu.title }}
        </div>
      </div>
    </div>
  </div>
</template>

交互状态管理

通过 Vue 的响应式数据控制当前激活的一级菜单索引：

methods: {
  toggleSubMenu(index) {
    this.activeIndex = this.activeIndex === index ? null : index;
  }
},
data() {
  return {
    activeIndex: null
  }
}

样式与动画优化

为二级菜单添加过渡动画，提升用户体验：

.sub-menu {
  transition: all 0.3s ease;
  max-height: 0;
  overflow: hidden;
}
.sub-menu.active {
  max-height: 200px;
}

路由集成

若需跳转功能，结合 vue-router 为菜单项添加路由链接：

<router-link 
  v-for="(subMenu, subIndex) in menu.children" 
  :key="subIndex" 
  :to="subMenu.path"
>
  {{ subMenu.title }}
</router-link>

组件化拆分

将导航拆分为可复用的组件（如 NavItem.vue），通过 props 传递数据，便于维护和扩展。

响应式适配

使用 CSS 媒体查询或 Vue 的响应式布局工具（如 v-bind:class）适配移动端折叠效果。