（十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

任务九 axios前后端跨域数据交互https://blog.csdn.net/wdyan297/article/details/128742035?spm=1001.2014.3001.5501

任务十 VUE侧边菜单栏导航

任务九 使用axios实现前后端跨域数据交互。并且继续熟悉使用Element UI组件，完成用户数据增删改查。目前我们的前端页面还没有变，仍然沿用最初的home页面，本次任务中我们将进行VUE路由设计，主要对侧边栏进行维护，实现页面导航，然后将home页面改为Manage.vue。把用户管理页面进行组件化设计。通过本次任务，大家能够：
（1）理解并逐步掌握VUE组件的含义；
（2）深入理解VUE单页面应用；
（3）初步掌握VUE路由的概念和使用方法。

一、侧边栏优化为组件Aside

为了与整个项目的完整与合理，将前面的Home.vue文件改名为Manage.vue。

1. 新建Aside .vue组件

在components中新建一个Aside .vue组件，将<el-aside>与 </el-aside>之间的<el-menu></el-menu>内容全部放到Aside.vue组件中。
特别注意： 这里是将原来的剪切后粘贴到Aside组件中。等一会只需要引用组件就可以了。
Aside .vue组件代码如下：

<template>
  <el-menu :default-openeds="['1', '3']" style="min-height:100%; overflow-x:hidden"
    background-color=rgb(48,65,86)
    text-color=#ccc
    active-text-color=red
    >
    <div style="height:60px; line-height:60px; text-align:center">
    <img src="../assets/logo.png" style="width:20px;position:relative;top:5px;margin-right:5px"/>
    <b style="color:white">后台管理系统</b>
    </div>
    <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
        <template slot="title">选项4</template>
        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
    </el-submenu>
    <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
        <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-grou