保姆级教程: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>
至此,前端页面效果如下:
前端页面至此完成。明天开始编写后端代码。剩下三天时间会实现一个完整的前后端分离项目,后面不见不散~