一、概述
在上一篇文章中,我们已经搭建好了首页的一个大概样式,参考链接:
https://www.cnblogs.com/xiao987334176/p/14434383.html
现在我们就来使用ElementUI搭建头部组件,最终效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/97b31dfbefae71fcc5587a5d3297cdfc.png)
二、头部组件
注意:项目代码参考上一篇的,修改 views/Layout/components/AppHeader.vue
<template>
<!-- logo和文字 -->
<div class="header">
<a href="#/"> <!-- 点击进入首页 -->
<img class="logo" src="@/assets/logo.png" width="25px" />
<span class="company">后台管理系统</span>
</a>
<!-- logo和文字结束 -->
<!-- 下拉菜单-->
<el-dropdown @command="handleCommand"><!-- 绑定指令,在methods里定义-->
<span class="el-dropdown-link">
您好
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<!-- icon是修改图标 ,command是点击后传给方法的值-->
<el-dropdown-item icon="el-icon-edit" command="edit">>修改密码</el-dropdown-item>
<el-dropdown-item icon="el-icon-s-operation" command="quit">>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 下拉菜单结束-->
</div>
</template>
<script>
export default {
methods: {
handleCommand(command){
this.$message(`点击了${command}`)
}
},
}
</script>
<style scoped>
/* logo */
.logo {
vertical-align: middle; /* 居中 */
padding: 0px 10px 0px 40px; /* 上右下左 */
}
/* 文字 */
.company {
position: absolute;
color: white;
}
/* 下拉菜单 */
.el-dropdown{
float: right; /* 浮动在右边 */
margin-right: 40px; /* 靠右40px */
}
/* 系统管理 */
.el-dropdown-link{
color: white;
cursor: pointer; /* 鼠标放上去是手的形状 */
}
</style>
刷新页面,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/01e056efaad5c389e93de89768cf6136.png)
三、左侧区域
修改 views/Layout/components/Appnavbar.vue
<template> <!-- 使用element的导航菜单 -->
<div class="navbar">
<!--default-active默认选中的菜单,选中后颜色是 active-text-color -->
<!-- :router='true',true表示开启路由模式,开启之后,index值代表的就是路由地址-->
<!-- :router='true'开启之后点击就会跳转到对应的路由,默认为false -->
<!-- text-color 文字的颜色 -->
<el-menu :router='true' default-active="/home" class="el-menu-vertical-demo" background-color="#545c64"
text-color="#fff" active-text-color="#ffd04b">
<!-- 首页 class就是对应的icon -->
<el-menu-item index="/home">
<i class="el-icon-menu"></i>
<span slot="title">首页</span>
</el-menu-item>
<!-- 会员管理 index下的左右 / 别忘记-->
<el-menu-item index="/member/">
<i class="el-icon-s-custom"></i>
<span slot="title">会员管理</span>
</el-menu-item>
<!-- <!– 供应商管理 –>-->
<!-- <el-menu-item index="/supplier/">-->
<!-- <i class="el-icon-menu"></i>-->
<!-- <span slot="title">供应商管理</span>-->
<!-- </el-menu-item>-->
<!-- <!– 商品管理 –>-->
<!-- <el-menu-item index="/goods/">-->
<!-- <i class="el-icon-suitcase-1"></i>-->
<!-- <span slot="title">商品管理</span>-->
<!-- </el-menu-item>-->
<!-- <!– 员工管理 –>-->
<!-- <el-menu-item index="/staff/">-->
<!-- <i class="el-icon-user"></i>-->
<!-- <span slot="title">员工管理</span>-->
<!-- </el-menu-item>-->
</el-menu>
</div>
</template>
<style scoped>
/* 去掉右边框 */
.el-menu {
border-right: none;
}
</style>
刷新页面,左边的菜单栏就出来了,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c638f54bf55dcfce96a211406653cabe.png)
这样左侧我们也做好了,但是点击左边的菜单会进入一个空白页面,因为我们开启了路由但是没有配置
![](https://i-blog.csdnimg.cn/blog_migrate/4a79eb5d0314ef96c8868f248234925f.png)
四、其他组件
上面我们已经写好了左侧导航,并且点击能跳转到对应的路由,接下来我们来写对应的组件,我们把组件都放在src下的views下面。
分别是首页,会员管理。如果还有其他的,请根据实际情况修改。
在src/views目录下创建2个文件夹,分别是Home,Member。并在新目录下创建index.vue
最终src目录结构如下:
./
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
└── views
├── Home
│ └── index.vue
├── Layout
│ ├── components
│ │ ├── AppHeader.vue
│ │ ├── Appmain.vue
│ │ └── Appnavbar.vue
│ └── index.vue
└── Member
└── index.vue
修改 views/Home/index.vue
<template>
<div>
首页
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
修改 views/Member/index.vue
<template>
<div>
会员管理
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
五、首页路由配置
上面我们点击左侧的首页会跳转到空白页面,我们已经写好了首页,会员的组件(views下的)。我们期望的是当我们点击左侧对应的导航,对应的组件渲染在Layout的中间区域。
首页,会员的组件都是Layout的一个子组件,我们可以放在children下面,在 router/index.js 里配置首页的路由,代码如下
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout' // 默认加载index.vue
import Home from '@/views/home'
import Member from '@/views/member'
Vue.use(Router)
export default new Router({
mode: 'history', //去掉url中的#
routes: [
{
path: '/',
name: 'layout', // 路由名称
redirect: '/home', // 当访问 / 时重定向到 home
component: Layout , // 组件对象
// 因为首页,会员都是 Layout 下的 main 里的,所以要将这些组件作为 Layout 组件的子组件,使用children,里面是一个数组,接收一个个对象
// meta 是
children: [
{
path: '/home',
component: Home,
meta: {title: '首页'}
}
]
},
]
})
修改 views/Layout/components/Appmain.vue,增加组件出口
<template>
<div class="main">
<router-view> </router-view> <!-- 组件的出口 -->
</div>
</template>
<script>
export default {
name: "AppMain"
}
</script>
<style scoped>
</style>
这样当我们点击首页的时候会把views/home/index.vue里的内容渲染到views/Layout/components/Appmain.vue
六、走通所有导航
上面我们已经写了个首页的导航,我们是在 Layout组件下写了个children,还有一种其他的方法,是和Layout组件同级
修改 router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout' // 默认加载index.vue
import Home from '@/views/home'
import Member from '@/views/member'
Vue.use(Router)
export default new Router({
mode: 'history', //去掉url中的#
routes: [
{
path: '/',
name: 'layout', // 路由名称
redirect: '/home', // 当访问 / 时重定向到 home
component: Layout , // 组件对象
// 因为首页,会员都是 Layout 下的 main 里的,所以要将这些组件作为 Layout 组件的子组件,使用children,里面是一个数组,接收一个个对象
// meta 是
children: [
{
path: '/home',
component: Home,
meta: {title: '首页'}
},
// {
// path: '/member',
// component: Member,
// meta: {title: '会员管理'}
// },
]
},
// 上面的是一种写法,可以放在children下面,还有一种方法是下面的这种
// 当访问 /member 时,渲染的是 Layout 组件,
{
path: '/member',
component: Layout,
children: [
{
path: '/', // 等价于 /member/,请求 /member 时会在后面拼接个 / 因为AppNavbar下的index.vue写的是/member/
component: Member,
meta: {title: '会员管理'}
}
]
},
]
})
这样当我们点击左侧导航栏的时候,右边都会加载对应的组件
![](https://i-blog.csdnimg.cn/blog_migrate/ea8b2ab8b73168f82d61eaadca0d0a6d.png)
七、登录页面
登录页面是独立的,不需要加载Layout,怎么做到呢?
其实在路由上面,处理一下即可。
在views下面创建Login,并创建index.vue,此时src目录结构如下:
./
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── router
│ └── index.js
└── views
├── Home
│ └── index.vue
├── Layout
│ ├── components
│ │ ├── AppHeader.vue
│ │ ├── Appmain.vue
│ │ └── Appnavbar.vue
│ └── index.vue
├── Login
│ └── index.vue
└── Member
└── index.vue
修改views/Login/index.vue
<template>
<div>这是登录页面</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>
修改 router/index.js 增加登录路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/views/Layout' // 默认加载index.vue
import Home from '@/views/home'
import Member from '@/views/member'
import Login from '@/views/login'
Vue.use(Router)
export default new Router({
mode: 'history', //去掉url中的#
routes: [
{
path: '/login',
name: 'login', // 路由名称
component: Login // 组件对象
},
{
path: '/',
name: 'layout', // 路由名称
redirect: '/home', // 当访问 / 时重定向到 home
component: Layout , // 组件对象
// 因为首页,会员都是 Layout 下的 main 里的,所以要将这些组件作为 Layout 组件的子组件,使用children,里面是一个数组,接收一个个对象
// meta 是
children: [
{
path: '/home',
component: Home,
meta: {title: '首页'}
},
// {
// path: '/member',
// component: Member,
// meta: {title: '会员管理'}
// },
]
},
// 上面的是一种写法,可以放在children下面,还有一种方法是下面的这种
// 当访问 /member 时,渲染的是 Layout 组件,
{
path: '/member',
component: Layout,
children: [
{
path: '/', // 等价于 /member/,请求 /member 时会在后面拼接个 / 因为AppNavbar下的index.vue写的是/member/
component: Member,
meta: {title: '会员管理'}
}
]
},
]
})
访问登录url
http://localhost:8080/login/
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9106e573cda357074b477b62644b9586.png)
本文参考链接: