Spring Boot+Vue前后端分离开发08-----Vue开发指南（续3）

Vue+ElementUI如何使用多级菜单

之前Spring Boot+Vue前后端分离开发06-----Vue开发指南（续2）我们使用ElementUI菜单的方法存在一定的问题，它的菜单在代码中用Json写死了，在后期菜单扩展中有一定局限性。为了避免这种情况，我们可以使用$router.options.routes参数来解决这个问题

首先我们查看下目前的路由：路由给到了两种情况，一种是带子菜单的，另一种没有子菜单

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

    {
        path: '/',
        name: '图书管理',
        component: () => import('../views/Index.vue'),
        redirect:"/bookManage",
        children:[
            //新增一个Table路由
            {
                path: '/bookManage',
                name: '查询图书',
                component: () => import('../views/BookManage.vue')
            },
            {
                path: '/addBook',
                name: '添加图书',
                component: () => import('../views/AddBook.vue')
            }
        ]
    },
    {
        path: '/userManage',
        name: '用户管理',
        component: () => import('../views/UserManage.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

接着我们改进原来App.vue的两处代码

修改后的代码，直接读取路由信息生成菜单，并且区分了有子菜单和无子菜单

<template>
  <div>

    <!--整体页面容器-->
    <el-container style="height: 700px; border: 1px solid #eee">

      <!--左侧菜单栏-->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-active="this.$router.path" router>

          <!--带子菜单的路由-->
          <el-submenu v-if="item.children" v-for="(item,index) in $router.options.routes" :key="index" :index="index">
            <template slot="title">{{ item.name }}</template>
            <el-menu-item v-for="(item_child,i_child) in item.children" :key="i_child" :index="item_child.path">
              <template slot="title">{{ item_child.name }}</template>
            </el-menu-item>
          </el-submenu>

          <!--不带子菜单的路由-->
          <el-menu-item v-if="!item.children" v-for="(item,index) in $router.options.routes" :key="index" :index="item.path">
            <template slot="title">{{ item.name }}</template>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!--主内容部分-->
      <el-container>

        <!--内容头部-->
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <!--具体内容-->
        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>

    </el-container>


  </div>
</template>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
    export default {
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }

        }
    };
</script>

修改后的效果如下