vue合家福实例(3)：根据路由生成菜单

本章的最终效果

最终效果图

这章的开发在admin子项目中进行。这里我们在project/admin中创建文件App.vue。内容如vue合家福实例(2)：使用element-ui el-scrollbar中的，建立一个项目的页面框架。统一的菜单和顶部状态栏。
在开发中，要增加一个页面。我是先写一个简单的组件(.vue)文件，然后配置路由。接下去是修改菜单(这样的情况下，一般菜单会建立一个组件)。那么，如果路由配置好后就可以增加到菜单中，即菜单是根据路由生成的，这样修改路由就不用再去改菜单的代码。想想挺酷的。
目录结构：

目录结构

我们在红框中的文件目录进行工作。
BhLayout>src>menu-item.vue （一个菜单项组件，对element-ui的菜单组件进行再封装）
菜单的代码在App.vue中，routers.js是路由配置文件。

App.vue：

补充说明：$router.options.routes(如果在js中是this.$router.options.routes)。取出当前路由内容，即src>project>admin>router>routers.js文件中的内容
菜单是通过$router.options.routes（项目路由）自动生成的。下面是路由(routers.js)的内容：

import Wrap from '@/components/Wrap.vue'

const routers = [{
  path: '/',
  name: 'home',
  text: '首页',
  menu: true,
  icon: 'fas fa-home',
  component: resolve => require(['../views/Home'], resolve)
}, {
  path: '/dashboard',
  name: 'dashboard',
  text: '仪表盘',
  menu: true,
  icon: 'fas fa-tachometer-alt',
  component: resolve => require(['../views/Dashboard'], resolve)
}, {
  path: '/user',
  name: 'user',
  text: '用户管理',
  menu: true,
  hasChildren: true,
  icon: 'fas fa-user-cog',
  component: Wrap,
  children: [{
    path: '/user/permission',
    name: 'user_permission',
    text: '权限管理',
    menu: true,
    component: resolve => require(['../views/user/Permission'], resolve)
  }, {
    path: '/user/role',
    name: 'user_role',
    text: '角色管理',
    menu: true,
    component: resolve => require(['../views/user/Role'], resolve)
  }, {
    path: '/user/user',
    name: 'user_user',
    text: '用户管理',
    menu: true,
    component: resolve => require(['../views/user/User'], resolve)
  }]
}]

export default routers

补充说明：Wrap.vue文件只是一个简单的路由容器，内容如下。因为vue-cli3项目生成的，如果写component: { template: '' } 会报异常。我的方案是建立一个组件，引入。

生成菜单的组件BhMenuItem，关键内容如下：

补充说明：菜单的结构是一棵树，可以一层层深入。在这里判断如果菜单项没有子菜单的话就用element-ui的el-menu-item组件，如果还有子菜单，则用el-menu-item。最后如果有子菜单，递归使用组件。
在App.vue用BhMenuItem组件生成菜单树。完成后，菜单如图：

生成的菜单

发现菜单的图标样式不合理，这是font awesome图标。下章补充font awesome图标使用方法，在这里与element-ui 图标的padding不一样。在全局样式表中加入样式：

.el-menu .fa,
.el-menu .fas,
.el-menu .far {
  margin-right: 10px;
}

最终效果

效果一

点击图标后收缩菜单。

效果二