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）适配移动端折叠效果。
