vue左侧导航栏可以伸缩的包括二级三级导航

Vue开发中，为了实现一个可伸缩的左侧导航栏，通常会结合组件化和响应式设计。可以使用如Element UI、Vuetify这类UI库，它们提供了丰富的导航组件，其中包含支持折叠、展开功能的菜单。以下是一个简单的概述：

1. **基础结构**：使用`<el-menu>`或自定义的`<nav>`标签作为主导航容器，包含一系列`<el-submenu>`（二级菜单）或直接的`<a>`元素（一级菜单项）。

<template>
  <div class="sidebar">
    <el-menu default-active="1-1" :collapse-transition="true">
      <!-- 一级菜单 -->
      <el-menu-item v-for="(item, index) in menus" :key="index">
        <template #title>{{ item.title }}</template>
        <!-- 如果有二级菜单 -->
        <el-submenu v-if="item.children && item.children.length > 0" :index="item.index">
          <template #title>{{ item.subTitle }}</template>
          <el-menu-item-group v-for="subItem in item.children" :key="subItem.index">
            <template #title>{{ subItem.title }}</template>
            <el-menu-item :index="subItem.path"></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- 如果没有二级菜单 -->
        <a v-else :href="item.href" :key="item.path">{{ item.title }}</a>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [
        // ... 定义你的菜单数据
      ]
    };
  }
};
</script>

2. **样式调整**：通过CSS控制`.sidebar`和`.sidebar-collapse`类来实现导航栏的展开与折叠。例如，添加一个`:class="{ collapsed: isCollapsed }"`到`<el-menu>`上，`isCollapsed`可以根据需求来自组件的状态管理或路由变化动态改变。

3. **状态管理**：如果需要在多个地方控制导航栏的展开状态，可以利用Vuex或Vue的响应式特性，将状态存储在store或计算属性中。