vue2 顶部一级菜单 左侧二三级菜单

在Vue2项目中，创建一个带有顶级一级菜单和左侧二级、三级菜单的布局通常会涉及到组件化和路由管理。你可以按照以下步骤构建：

1. **设置路由**:
使用Vue Router对菜单进行动态管理。首先，在`router.js`文件中配置路由，包括路径（path）、视图组件（component）以及嵌套菜单所需的参数。

import Vue from 'vue';
import Router from 'vue-router';

// ...其他路由配置

{
  path: '/top-menu/:topMenuId',
  name: 'TopMenu',
  component: TopMenu,
  children: [
    {
      path: 'sub-menu/:subMenuId',
      name: 'SubMenu',
      component: SubMenu,
      children: [
        // 更多三级菜单项
        { path: '*', component:三级菜单组件 }
      ]
    }
  ]
}

2. **组件设计**:
- `TopMenu.vue`: 创建一个包含所有一级菜单项的组件，每个菜单项是一个链接，点击后通过`this.$router.push`跳转到对应的子路由。

   <template>
     <ul>
       <li v-for="item in menus" :key="item.id">
         <router-link :to="{ name: 'TopMenu', params: { topMenuId: item.id }}">{{ item.name }}</router-link>
       </li>
     </ul>
   </template>

- `Submenu.vue`: 展示当前选中的顶级菜单下的所有二级菜单项。

   <template>
     <ul>
       <li v-for="subItem in menuItems" :key="subItem.id">
         <router-link :to="{ name: 'SubMenu', params: { subMenuId: subItem.id }}">{{ subItem.name }}</router-link>
       </li>
     </ul>
   </template>

3. **状态管理**:
可能需要配合Vuex来管理菜单的状态，如是否展开某一级菜单等。