vue3侧边栏二级菜单

在Vue 3中创建一个具有侧边栏和二级菜单的布局可以通过以下步骤完成：

1. 首先，创建一个侧边栏组件（SideBar），可以使用Vue Router来管理路由。在该组件中，定义一个包含菜单项和二级菜单的数据结构。

2. 在SideBar组件的模板中，使用v-for指令循环渲染菜单项和二级菜单。可以使用Vue Router的router-link组件来实现路由导航。

3. 在点击菜单项时，使用Vue的事件处理方法来展开或收起二级菜单。可以使用一个布尔值来控制二级菜单的显示与隐藏。

4. 创建二级菜单组件（Submenu），在Submenu组件的模板中，使用v-for指令循环渲染二级菜单项。

5. 在点击二级菜单项时，使用Vue Router的编程式导航来跳转到相应的路由。

下面是一个简单的示例代码：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menu" :key="item.id">
        <div @click="toggleSubMenu(item.id)">
          {{ item.title }}
        </div>
        <ul v-if="item.showSubMenu">
          <li v-for="subItem in item.subMenu" :key="subItem.id">
            <router-link :to="subItem.route">{{ subItem.title }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          id: 1,
          title: '菜单1',
          showSubMenu: false,
          subMenu: [
            { id: 1, title: '子菜单1', route: '/submenu1' },            { id: 2, title: '子菜单2', route: '/submenu2' }
          ]
        },
        {
          id: 2,
          title: '菜单2',
          showSubMenu: false,
          subMenu: [
            { id: 3, title: '子菜单3', route: '/submenu3' },
            { id: 4, title: '子菜单4', route: '/submenu4' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleSubMenu(itemId) {
      this.menu.forEach(item => {
        if (item.id === itemId) {
          item.showSubMenu = !item.showSubMenu
        } else {
          item.showSubMenu = false
        }
      })
    }
  }
}
</script>

这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。同时，你还需要在主应用程序中引入和使用这个侧边栏组件。