（十）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组件，将与 之间的内容全部放到Aside.vue组件中。
特别注意： 这里是将原来的剪切后粘贴到Aside组件中。等一会只需要引用组件就可以了。
Aside .vue组件代码如下：

特别注意： 注意输出组件。

2.引入Aside组件

在Manage.vue中引入Aside组件。

2. 引入Header组件

在Manage.vue中引入Header组件。

4. 修改路由，打开网址直接到需要的页面

修改路由，利用重定向，使得http://localhost:8081/重定向到http://localhost:8081/home。

const routes = [
  {
    path: '/',
    name: 'Manage',
    redirect: '/home',
    component: Manage,
    children:[
      {
        path: 'user',
        name: 'User',
        component: User
      },
      {
        path: 'home',
        name: 'Home',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue')
      }
    ]
  }
]

5. 运行项目

注意：如果有运行出来是下图这样的同学们。

一方面，需要在Manage组件中看你的el-container有没有设置到高度为100%的样式。 style="height: 100%;
如果已经设置，就需要改修改App组件中的样式。如下：

项目运行就可以正常显示。并且菜单栏根据页面进行路由选择。

地址栏进行相应显示。

任务总结

本次任务，主要完成并掌握以下内容：
（1）VUE路由设计，子路由设计；
（2）VUE单页面应用原理；
（3）熟练引用Element的各类组件。