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：

<script>
import _ from 'lodash'
import {BhMenuItem} from '@/components/BhLayout' // 加入菜单项组件
export default {
  name: 'app',
  components: {
    BhMenuItem
  },
  data () {
    return {
      isCollapse: false,
      asideWidth: '230px',
      vmenus: [],
      defActive: this.activePath()
    }
  },
  created () {},
  watch: {
    $route () {
      this.defActive = this.activePath()
      this.setPageTitle()
    }
  },
  methods: {
    // 改变菜单栏的宽度
    changeCollapse () {
      this.isCollapse = !this.isCollapse
      this.$emit('collapse-change', this.isCollapse)
      if (this.isCollapse) {
        this.asideWidth = '65px'
      } else {
        this.asideWidth = '230px'
      }
    },
    // 设置页面标题
    setPageTitle () {
      let path = this.$route.path
      let pathArr = _.split(path, '/')
      let l = pathArr.length
      let menus = this.$router.options.routes
      if (_.isEmpty(menus) || l < 2) {
        return
      }
      let ts = ['vue全家福']
      let i = 1
      let children = menus
      while (i < l) {
        path = _.join(_.slice(pathArr, 0, i + 1), '/')
        let index = _.findIndex(children, menu => {
          let menuPath = menu.path
          let i = menuPath.indexOf('/:')
          if (i > 0) {
            menuPath = menuPath.substring(0, i)
          }
          return menuPath === path
        })
        if (index < 0) {
          break
        }
        if (!children[index]) {
          break
        }
        if (children[index]['text']) {
          ts.push(children[index]['text'])
        }
        if (!children[index]['children'] || _.isEmpty(children[index]['children'])) {
          break
        }
        children = children[index]['children']
        i++
      }
      this.title = _.clone(ts)
    },
    // 计算菜单当前选中的路径
    activePath () {
      let path = this.$route.path
      let pathArr = _.split(path, '/')
      let l = pathArr.length
      if (l <= 2) {
        return path
      }
      let menus = this.$router.options.routes
      if (_.isEmpty(menus)) {
        return path
      }
      let i = 1
      let children = menus
      while (i < l) {
        path = _.join(_.slice(pathArr, 0, i + 1), '/')
        let index = _.findIndex(children, {'path': path})
        if (index < 0) {
          break
        }
        if (!children[index]) {
          break
        }
        if (children[index]['hasChildren'] === false || !children[index]['children'] || _.isEmpty(children[index]['children'])) {
          break
        }
        children = children[index]['children']
        i++
      }
      return path
    }
  }
}
</script>

<template>
  <el-container>
    <!-- 菜单栏 -->
    <el-aside :width="asideWidth">
      <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="default-scrollbar__view">
        <div :class="isCollapse ? 'menu-collapsed' : 'menu-expanded'">
          <el-menu
            :default-active="defActive"
            class="el-menu-vertical-demo"
            unique-opened
            router
            :collapse="isCollapse">
            <bh-menu-item :menu="item" :key="item.name" v-for="item in $router.options.routes" v-if="item.menu"></bh-menu-item>
          </el-menu>
        </div>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <!-- 右边上面的栏目 -->
      <el-header class="clear">
        <div class="collapse-btn" @click.prevent="changeCollapse">
          <i class="fas fa-bars" :class="{ rotate90: isCollapse }"></i>
        </div>
      </el-header>
      <!-- 路由容器 -->
      <router-view></router-view>
    </el-container>
  </el-container>
</template>

<style scoped>
.collapse-btn {
  float: left;
  font-size: 24px;
  cursor: pointer;
}
.rotate90 {
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
</style>

补充说明：$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: '<router-view></router-view>' } 会报异常。我的方案是建立一个组件，引入。

<script>
export default {
  name: 'Wrap'
}
</script>

<template>
  <router-view></router-view>
</template>

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

<template>
  <component v-bind:is="currentItemComponent" :index="menu.path" :key="menu.path">
    <i :class="menu.icon" v-if="menu.icon && !hc"></i><span v-if="!hc" slot="title">{{menu.text}}</span>
    <template slot="title" v-if="hc">
      <i :class="menu.icon" v-if="menu.icon"></i><span slot="title">{{menu.text}}</span>
    </template>
    <!-- 这里用了递归生成菜单项 -->
    <bh-menu-item :menu="child" :key="child.name" v-for="child in menu.children" v-if="hc && child.menu"></bh-menu-item>
  </component>
</template>

<script>
export default {
  name: 'BhMenuItem',
  props: {
    menu: Object
  },
  data () {
    return {
      hc: false
    }
  },
  computed: {
    currentItemComponent: function () {
      return this.hasChildren() ? 'el-submenu' : 'el-menu-item'
    }
  },
  methods: {
    hasChildren () {
      this.hc = this.menu.hasChildren !== false && this.menu.children && this.menu.children.length > 0
      return this.hc
    }
  }
}
</script>

补充说明：菜单的结构是一棵树，可以一层层深入。在这里判断如果菜单项没有子菜单的话就用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;
}

最终效果

效果一

点击图标后收缩菜单。

效果二