保姆级课程：Spring Boot+Vue前后端分离开发（第三天）

第三天任务概要

继续学习Element UI的使用，学习如何设置动态路由导航栏。
在第二天的学习中，我们选择了一种布局，其实这种布局可以总结为如下格式：
（1）红色部分为App.vue,是不变的部分；
（2）黄色部分是显示资源的窗口，随着导航栏选项选择的改变，显示我们想要的资源。

然而在第二天的课程中，发现页面有两个导航栏进行了嵌套。

此外，还需要对导航栏进行其他修改，因此让我们开启今天的学习之旅。

第一步：删除嵌套导航栏

在src/views文件夹中建立Index.vue：

然后在src/router里的index.js引入Index.vue，同时删掉App.vue的引入，并将const routes里的导航栏指向改成Index：
index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Page1 from "../views/Page1.vue";
import Page2 from "../views/Page2.vue";
import Page3 from "../views/Page3.vue";
import Page4 from "../views/Page4.vue";

import Index from "../views/Index.vue";

Vue.use(VueRouter)

const routes = [
  {
    path: '/', //输入localhost:8080/直接跳转到index.vue中
    name: '导航1',
    component: Index, //将导航栏指定到Index.vue中，相当于将导航栏直接配置到上图中的黄色区域中
    children:[
      {
        path: '/Page1',
        name: '页面1',
        component: Page1
      },
      {
        path: '/Page2',
        name: '页面2',
        component: Page2
      }
    ]
  },
  {
    path: '/navigation',
    name: '导航2',
    component: Index,//将导航栏指定到Index.vue中
    children:[
      {
        path: '/Page3',
        name: '页面3',
        component: Page3
      },
      {
        path: '/Page4',
        name: '页面4',
        component: Page4
      }
    ]
  }
]

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

export default router

Index.vue的完整内容如下：

<template>
    <div id="app">
            <el-container style="height: 500px; border: 1px solid #eee">
              <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

        <!--    动态读取src/router中index.js里的菜单名称    -->
                <el-menu>
                  <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''"><!--第一个router可以简单理解为src/router，第三个router指index.js中的routes数组。index是item的下标-->
                    <template slot="title"><i class="el-icon-setting">{{item.name}}</i></template><!--获取每一项的名称，即表格名称-->
                    <el-menu-item v-for="(item1,index1) in item.children" :index="index+'-'+index1">
                      <template slot="title"><i class="el-icon-setting">{{item1.name}}</i></template><!--获取每一项的名称，即表格名称-->
                    </el-menu-item>
                  </el-submenu><!--通过for循环读取菜单里的数据-->
                </el-menu>
              </el-aside>

                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
    </div>
</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style scoped>

</style>

App.vue删除中除了的所有代码：
App.vue：

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


<style>

</style>

<script>
  export default {
    data() {}
  };
</script>

运行Vue前端，效果如下：

第二步：实现导航栏与跳转页面的绑定

在这一步中，我们要实现导航栏与跳转页面的绑定，即点击一个导航栏，会自动跳转到相应的页面中。
该步可以分为三个小步骤：
1.为标签添加router属性：

2.在页面中添加标签，实现router的动态渲染：

一定要加，实现页面的渲染，即跳转到相应的页面后，实现相应页面数据的显示，否则相应页面的数据无法显示。

3.将标签的index值设置成要跳转的router：

第三步：实现登录时的初始化页面

打开index.js，设置redirect：

为了实现跳转页面实现相应导航栏的高亮，可以在Index.vue中添加如下代码：

Index.vue完整代码如下：

<template>
    <div id="app">
            <el-container style="height: 500px; border: 1px solid #eee">
              <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

        <!--    动态读取src/router中index.js里的菜单名称    -->
                <el-menu router :default-openends="['0','1']">
                  <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''"><!--第一个router可以简单理解为src/router，第三个router指index.js中的routes数组。index是item的下标-->
                    <template slot="title"><i class="el-icon-setting">{{item.name}}</i></template><!--获取每一项的名称，即表格名称-->
                    <el-menu-item v-for="(item1,index1) in item.children" :index="item1.path" :class="$route.path==item1.path?'is-active':''"><!--:index="item1.path"对应index.js中每一项route的path属性
                        :class="$route.path==item1.path?'is-active':''" 中，$route.path指浏览器地址栏url的path，而item1.path对应前端菜单栏中每一项的path。判断两者是否相等。若相等，则is-active使菜单栏高亮。
                    -->
                      <template slot="title"><i class="el-icon-setting">{{item1.name}}</i></template><!--获取每一项的名称，即表格名称-->
                    </el-menu-item>
                  </el-submenu><!--通过for循环读取菜单里的数据-->
                </el-menu>
              </el-aside>

                <el-main>
                    <router-view></router-view><!--一定要加，实现页面的渲染，即跳转到相应的页面后，实现相应页面数据的显示，否则相应页面的数据无法显示-->
                </el-main>
            </el-container>
    </div>
</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style scoped>

</style>

至此，前端页面效果如下：

前端页面至此完成。明天开始编写后端代码。剩下三天时间会实现一个完整的前后端分离项目，后面不见不散~