往期

从0到1完成一个Vue后台管理项目（一、创建项目）

从0到1完成一个Vue后台管理项目（二、使用element-ui）

从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）

从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）

从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））

从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）

从0到1完成一个Vue后台管理项目（六、404页）

从0到1完成一个Vue后台管理项目（七、Header、Footer、页面布局）

引入element-ui导航布局

代码

展示

这样我们就得到了一个常规的后台管理布局

改造

我们稍微改造一下，删除多余的代码

结果

添加Menu子组件

我们的Menu菜单，点开每一下，右侧会展示对应内容，所以毫无疑问，我们的Menu是需要子组件的

components下建立如图所示的文件夹和.vue组件，并初始化一下

配置路由

我们要给对应的子组件配置对应的路由

import { Icon } from "element-ui";
import Vue from "vue";
import Router from "vue-router";Vue.use(Router)export default new Router({routes: [{path: '/',redirect: '/login',component: () => import('@/components/Login')},{path: '/login',name: 'Login',component: () => import('@/components/Login')},{path: '*',name: 'NotFound',component: () => import('@/components/404.vue')},// {//   path: '/home',//   // component: () => import('@/components/Home')//路由懒加载//   component: resolve => require(['@/components/Home'], resolve)// },{path: '/home',name: '学生管理',iconClass: 'fa fa-users',redirect: '/home/student',component: () => import('@/components/Home'),children: [{path: '/home/student',name: '学生列表',iconClass: 'fa fa-list',component: () => import('@/components/students/StudentList')},{path: '/home/info',name: '信息列表',iconClass: 'fa fa-list-alt',component: () => import('@/components/students/InfoList')},{path: '/home/infos',name: '信息管理',iconClass: 'fa fa-list-alt',component: () => import('@/components/students/InfoLists')},{path: '/home/work',name: '作业列表',iconClass: 'fa fa-list-ul',component: () => import('@/components/students/WorkList')},{path: '/home/works',name: '作业管理',iconClass: 'fa fa-th-list',component: () => import('@/components/students/WorkMent')},]},{path: '/home',name: '数据分析',iconClass: 'fa fa-bar-chart',component: () => import('@/components/Home'),children: [{path: '/home/dataview',name: '数据概览',iconClass: 'fa fa-line-chart',component: () => import('@/components/dataAnalysis/DataView')},{path: '/home/mapview',name: '地图概览',iconClass: 'fa fa-line-chart',component: () => import('@/components/dataAnalysis/MapView')},{path: '/home/travel',name: '旅游地图',iconClass: 'fa fa-line-chart',component: () => import('@/components/dataAnalysis/TravelMap')},{path: '/home/score',name: '分数地图',iconClass: 'fa fa-line-chart',component: () => import('@/components/dataAnalysis/ScoreMap')},]},{path: '/users',name: '用户中心',iconClass: 'fa fa-user',component: () => import('@/components/Home'),children: [{path: '/users/user',name: '权限管理',iconClass: 'fa fa-user',component: () => import('@/components/users/User')}]}],mode: 'history'
})

这里的iconClass是为了给我们的菜单项配置对应的图标

改造Menu.vue

我们打印可以发现路由的信息已经存在了

我们根据路由进行菜单项渲染

我们发现已经显示出来了
但是有的不是我们想要的，比如404，怎么办

hidden:true

我们在路由添加hidden:true的配置项，然后在Menu设置v-if即可

展示

显示图标

还记得我们配置的iconClass吗，现在要用了

展示成功

配置子组件

我们现在发现，我们点击对应项，子组件的路由没有跟着变化，这就需要我们配置一下

设置路由出口

这样我们内容就可以跟着路由变化了