（十）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-group>
        <el-submenu index="2-4">
        <template slot="title">选项4</template>
        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
    </el-submenu>
    <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
        <template slot="title">分组一</template>
        <el-menu-item index="3-1">选项1</el-menu-item>
        <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
        <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
        <template slot="title">选项4</template>
        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  //输出组件
  name: "Aside"
}
</script>

<style scoped>
</style>

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

2.引入Aside组件

在Manage.vue中引入Aside组件。

<script>
// @ is an alias to /src
import Aside from '@/components/Aside.vue'

export default {
  name: 'Manage',
  components:{
    Aside
  },
  //  以下<script>中代码不变，略。

3.使用Aside组件

在Manage.vue中使用<Aside>组件。

    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <Aside></Aside>
    </el-aside>

4. 修改路由

因为Home组件的文件名进行了更换，这时候直接运行会报错，因为路由仍然在找原来的页面，所以需要修改路由。

5. 运行项目

如果项目运行不出数据，特别注意是否前面修改的每个文件都进行了保存。

扫描二维码关注公众号，回复： 17368282 查看本文章

二、头部优化为组件Header

1.新建Header .vue组件

在components中新建一个Header .vue组件，将<el-Header>与 </el-header>之间的<el-dropdown></el-dropdown>内容全部放到Header .vue组件中。

注意：为了方便后面传参学习，这里用户名“王小虎”我们采用传参的方式。

<template>
    <el-dropdown style="width:100px; cursor:pointer">
        <span>{
   
   {name}}</span><i class="el-icon-arrow-down" style="margin-left:5px"></i>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>  
</template>
<script>
export default {
    name: "Header",
    props: {
    name: String
  }
}
</script>

<style>

</style>

2. 引入Header组件

在Manage.vue中引入Header组件。

<script>
// @ is an alias to /src
import Aside from '@/components/Aside.vue'
import Header from '@/components/Header.vue'

export default {
  name: 'Manage',
  components:{
    Aside,
    Header
  },
  以下<script>中代码不变，略。

3. 使用Header组件

在Manage.vue中使用<Header >组件。

<el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid red; line-height:60px">
     <Header name="王小虎测试"/>
</el-header>

4. 运行项目

三、页面主体升级为User组件

1.新建user.vue组件

在views中新建一个user.vue组件，将<el-main>与 </el-main>之间的内容全部放到User.vue组件中。

注意： 这里需要添加一个<div></div>因为vue只认一个根

注意 在这里把需要的data、created以及methods全部拷贝到User组件，它们是一起使用的。

2. Manage.vue中通过使用子路由的方式访问User.vue

在Manage.vue中通过使用子路由的方式访问User.vue。因为我们不只是访问一个User页面，还要访问其他的页面（组件），这些组件都是在<el-main> 标签中显示。

     <el-main>
        <!--当前页面的子路由将在<router-view/>中展示-->
        <router-view/>       
     </el-main>

3.修改路由index.js文件

修改路由index.js文件，将User组件引入，并且作为子路由添加。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Manage from '../views/Manage.vue'
import User from '../views/User.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Manage,  
    children:[
      {
        path: 'user',
        name: 'User',
        component: User
      }
    ]
  },
  {
    path: '/about',
    name: 'about',
    // 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/AboutView.vue')
  }
]

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

export default router

4.运行项目

运行项目，注意路径需要加/user。

四、侧边栏完善菜单项及超链接

目前我们还没有将菜单与登录用户做对应关系，也就是说还没有做用户权限等内容，我们先安装目前的逻辑关系进行Element菜单栏的一级、二级菜单导航逻辑认识。

1. 修改Aside组件

根据实际情况，修改Aside组件，目前只有一个用户管理页面。

 <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
    router=""
    >
    <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-menu-item index="/">
        <template slot="title">
            <i class="el-icon-house"></i>
            <span slot="title">主页</span>
        </template>
     </el-menu-item>
    <el-submenu index="2">
        <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">系统管理</span>
        </template>
        <el-menu-item index="/user">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
        </el-menu-item>        
    </el-submenu>    
  </el-menu>

因为只有一个页面，default-openeds="[]"是默认打开设置，可以根据需要，默认打开某一个一级菜单，只需要填写index值即可。

2. 运行项目

3. 新增Home.vue组件

新增一个Home.vue组件，暂时作为系统登录后的主页面。

<template>
    <div>
        <h1>这是一个主页</h1>
    </div>
</template>
<script>
export default {
    name:"Home"
}
</script>

<style scoped>

</style>

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组件中的样式。如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style scoped>
#app{
  height: 100%;
}
</style>

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

地址栏进行相应显示。

任务总结

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