赞
踩
任务九 使用axios实现前后端跨域数据交互。并且继续熟悉使用Element UI组件,完成用户数据增删改查。目前我们的前端页面还没有变,仍然沿用最初的home页面,本次任务中我们将进行VUE路由设计,主要对侧边栏进行维护,实现页面导航,然后将home页面改为Manage.vue。把用户管理页面进行组件化设计。通过本次任务,大家能够:
(1)理解并逐步掌握VUE组件的含义;
(2)深入理解VUE单页面应用;
(3)初步掌握VUE路由的概念和使用方法。
为了与整个项目的完整与合理,将前面的Home.vue文件改名为Manage.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>
特别注意: 注意输出组件。
在Manage.vue中引入Aside组件。
<script>
// @ is an alias to /src
import Aside from '@/components/Aside.vue'
export default {
name: 'Manage',
components:{
Aside
},
// 以下<script>中代码不变,略。
在Manage.vue中使用<Aside>
组件。
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<Aside></Aside>
</el-aside>
因为Home组件的文件名进行了更换,这时候直接运行会报错,因为路由仍然在找原来的页面,所以需要修改路由。
如果项目运行不出数据,特别注意是否前面修改的每个文件都进行了保存。
在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>
在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>中代码不变,略。
在Manage.vue中使用<Header >
组件。
<el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid red; line-height:60px">
<Header name="王小虎测试"/>
</el-header>
在views中新建一个user.vue组件,将<el-main>
与 </el-main>
之间的内容全部放到User.vue组件中。
注意: 这里需要添加一个<div></div>
因为vue只认一个根
注意 在这里把需要的data、created以及methods全部拷贝到User组件,它们是一起使用的。
在Manage.vue中通过使用子路由的方式访问User.vue。因为我们不只是访问一个User页面,还要访问其他的页面(组件),这些组件都是在<el-main>
标签中显示。
<el-main>
<!--当前页面的子路由将在<router-view/>中展示-->
<router-view/>
</el-main>
修改路由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
运行项目,注意路径需要加/user。
目前我们还没有将菜单与登录用户做对应关系,也就是说还没有做用户权限等内容,我们先安装目前的逻辑关系进行Element菜单栏的一级、二级菜单导航逻辑认识。
根据实际情况,修改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值即可。
新增一个Home.vue组件,暂时作为系统登录后的主页面。
<template>
<div>
<h1>这是一个主页</h1>
</div>
</template>
<script>
export default {
name:"Home"
}
</script>
<style scoped>
</style>
修改路由,利用重定向,使得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') } ] } ]
注意:如果有运行出来是下图这样的同学们。
一方面,需要在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的各类组件。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。