vue2加element搭建后台系统 框架布局 面包屑 导航菜单

在Vue 2框架中结合Element UI搭建后台管理系统，通常会采用模块化的开发思路，将界面分为组件化的设计，包括布局、面包屑导航和导航菜单等部分。

1. **布局**：Element UI提供了一套响应式的栅格系统`el-row`和`el-col`，用于构建页面的基本布局。你可以通过调整列数和自适应设置，轻松创建适应不同屏幕尺寸的响应式设计。

2. **面包屑导航**：Element的`el-breadcrumb`组件可以用来实现面包屑功能，只需要将需要显示的历史路径添加到组件的`items`属性里。例如：

<el-breadcrumb separator="/" class="breadcrumb">
  <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path">{{ item.name }}</el-breadcrumb-item>
</el-breadcrumb>

这里`breadcrumbItems`是一个数组，包含各个层级的名称和路径信息。

3. **导航菜单**：Element的`el-menu`组件非常适合做后台系统的导航。你可以使用`el-submenu`作为子菜单，`isActive`属性可以帮助判断当前选中的菜单项。示例：

<el-menu default-active="$route.path" router>
  <el-menu-item v-for="item in menuItems" :key="item.id">
    <template #title>{{ item.name }} <i :class="{ active: isActive(item.path) }"></i></template>
    <el-submenu :index="item.path" v-if="item.children">
      <template #title>{{ item.text }}</template>
      <el-menu-item v-for="subItem in item.children" :key="subItem.id">{{ subItem.name }}</el-menu-item>
    </el-submenu>
  </el-menu-item>
</el-menu>

这里的`menuItems`是一个包含菜单层级结构的对象数组。