vue侧边栏二级联动菜单

Vue侧边栏二级联动菜单的实现可以通过以下步骤来完成：

1. 首先，我们需要在Vue的组件中引入侧边栏的数据。可以通过在data属性中定义一个菜单数组来存储侧边栏的数据。例如：

data() {
  return {
    menuList: [
      {
        label: '一级菜单1',
        children: [
          {
            label: '二级菜单1-1',
            link: '/menu1-1'
          },
          {
            label: '二级菜单1-2',
            link: '/menu1-2'
          }
        ]
      },
      {
        label: '一级菜单2',
        children: [
          {
            label: '二级菜单2-1',
            link: '/menu2-1'
          },
          {
            label: '二级菜单2-2',
            link: '/menu2-2'
          }
        ]
      }
    ]
  }
}

2. 接下来，在页面中使用v-for指令来循环渲染一级菜单项。例如：

<ul>
  <li v-for="menu in menuList" :key="menu.label">
    {{ menu.label }}
  </li>
</ul>

3. 在一级菜单项上绑定点击事件，以展示或者隐藏对应的二级菜单。可以通过设置一个`showChildren`属性来控制二级菜单的显示与隐藏。例如：

<li v-for="menu in menuList" :key="menu.label" @click="menu.showChildren = !menu.showChildren">
  {{ menu.label }}
  <ul v-if="menu.showChildren">
    <li v-for="child in menu.children" :key="child.label">
      {{ child.label }}
    </li>
  </ul>
</li>

4. 最后，为二级菜单项绑定点击事件，以实现菜单项的跳转。可以通过`router-link`组件来实现路由跳转。例如：

<li v-for="child in menu.children" :key="child.label">
  <router-link :to="child.link">{{ child.label }}</router-link>
</li>

通过以上步骤，我们可以实现一个基本的Vue侧边栏二级联动菜单。当点击一级菜单项时，对应的二级菜单会展示或隐藏，并且点击二级菜单项时可以实现对应的页面跳转。