Vue--ElementUI实现头部组件和左侧组件效果
前戏
前面我们已经搭建好了首页的一个大概样式，现在我们就来使用ElementUI搭建头部组件的效果
头部组件
代码如下
AppHeader/index.vue
<template>
<!-- logo和文字 -->
<div class="header">
<a href="#/"> <!-- 点击进入首页 -->
<img class="logo" src="@/assets/Logo1.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>
刷新页面
左侧区域
直接在AppNavbar里面写如下代码
<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>
刷新页面，左边的菜单栏就出来了
这样左侧我们也做好了，但是点击左边的菜单会进入一个空白页面，因为我们开启了路由但是没有配置，比如点击商品管理会出现下面的空白页
其他组件
上面我们已经写好了左侧导航，并且点击能跳转到对应的路由，接下来我们来写对应的组件，我们把组件都放在src下的views下面，分别为商品（goods），首页（home），会员（member），员工（staff），供应商（supplier），如下
每个index.vue里都写右侧的代码，只需要把文字替换即可
首页路由配置
上面我们点击左侧的首页会跳转到空白页面，我们已经写好了首页，会员，商品，供应商的组件（views下的）。我们期望的是当我们点击左侧对应的导航，对应的组件渲染在Layout的中间区域。
首页，会员，商品，供应商的组件都是Layout的一个子组件，我们可以放在children下面，在 src/router/index.js 里配置首页的路由，代码如下
import Vue from "vue"; import Router from "vue-router"; // import Login from '@/views/login/index' // 下面的情况，默认会导入@/views/login下的index.vue组件 import Login from '@/views/login' import Layout from '@/components/Layout' import Home from '@/views/home' Vue.use(Router); export default new Router({ 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: '首页'} } ] }, ] });
路由我们配置好了，当我们点击首页的时候右边出现的还是之前在AppMain下的index.vue下写的，如下
这是因为我们没有写组件的出口，更改AppMain下的index.vue代码，如下
<template> <div class="main"> <router-view> </router-view> <!-- 组件的出口 --> </div> </template>
这样当我们点击首页的时候会把views/home/index.vue里的内容渲染到AppMain下的index.vue
走通所有导航
上面我们已经写了个首页的导航，我们是在 Layout组件下写了个children，还有一种其他的方法，是和Layout组件同级
src/router/index.vue 代码如下
import Vue from "vue"; import Router from "vue-router"; // import Login from '@/views/login/index' // 下面的情况，默认会导入@/views/login下的index.vue组件 import Login from '@/views/login' import Layout from '@/components/Layout' import Home from '@/views/home' import Member from '@/views/member' import Goods from '@/views/goods' import Staff from '@/views/staff' import Supplier from '@/views/supplier' Vue.use(Router); export default new Router({ 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: '会员管理'} } ] }, { path: '/supplier', component: Layout, children:[ { path: '/', component: Supplier, meta: {title: '供应商管理'} } ] }, { path: '/goods', component: Layout, children:[ { path: '/', component: Goods, meta: {title: '商品管理'} } ] }, { path: '/staff', component: Layout, children:[ { path: '/', component: Staff, meta: {title: '员工管理'} } ] } ] });
这样当我们点击左侧导航栏的时候，右边都会加载对应的组件
