主页布局
3.1 实现基本的主页布局
//Home.vue
<template>
<el-container class="home_container">
<!-- 头部区 -->
<el-header>Header <el-button type="info" @click="logout">退出</el-button></el-header>
<!-- 页面主题区-->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 右侧内容主体 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
.home_container{
height:100%
}
//element.js
import { Container,Header,Aside,Main} from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
3.2 美化主页的header区域
<el-header>
<div>
<img src="../assets/heima.png" alt="" />
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
对样式设置
3.3 实现导航菜单的基本结构
导入NavMenu组件
import {Menu,Submenu,MenuItem} from 'element-ui'
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
进行使用
3.4 通过axios拦截器添加token验证
通过 axios 请求拦截器添加 token,保证拥有获取数据的权限。(预处理)
// axios请求拦截
axios.interceptors.request.use(config => {
// 为请求头对象,添加 Token 验证的 Authorization 字段
config.headers.Authorization = window.sessionStorage.getItem('token')
//在最后必须return config(固定写法)
return config
})
3.5 获取左侧菜单数据
data() { return { menulist: [] } },
created() { this.getMenuList() }, //页面加载就获取
methods: {
async getMenuList() {
const { data: res } = await this.$http.get("menus") //接口文档
if (res.meta.status != 200) return this.$message.error(res.meta.msg)
this.menulist = res.data
}
}
3.6 通过双层for循环渲染左侧菜单
<!-- 一级菜单 -->
<el-submenu v-for="item in menulist" :key='item.id' :index="item.id+''" >
<span>{{item.authName}}</span>
<!-- 二级菜单 -->
<el-menu-item v-for="subItem in item.children" :key='subItem.id' :index="subItem.id+''" >
<span>{{subItem.authName}}</span>
3.7 对左侧菜单栏设置字体颜色并添加分类图标
<i :class="iconsObj[item.id]"></i>
data() {
return {
iconsObj:{
'125':'iconfont icon-user',
'103':'iconfont icon-tijikongjian',
'101':'iconfont icon-shangpin',
'102':'iconfont icon-danju',
'145':'iconfont icon-baobiao',
}
}
.iconfont{
margin-right: 10px;
}
3.8 解决每次只能打开一个菜单项和边框问题
<el-menu unique-opened > //element提供的
.el-aside {
background-color: #333744;
.el-menu{
border-right: none;
}
}
3.9 实现侧边栏的折叠和展开效果
<el-aside :width="isCollapse?'64px':'200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<el-menu :collapse="isCollapse" :collapse-transition="false"> //折叠 折叠动画效果
data() { return { isCollapse:false }
methods: { toggleCollapse() { this.isCollapse= !this.isCollapse }}
3.10 实现首页路由的重定向
//components下新建 Welcome.vue
//index.js (router)
{
path: '/home',
component: Home,
redirect:'/welcome', //重定向到welcome
children: [{ path: '/welcome', component: Welcome}]
}
//Home.vue
<!-- 右侧内容主体 -->
<el-main>
<router-view></router-view>
</el-main>
3.11 实现侧边栏路由链接的改造
<el-menu :router="true" >
<el-menu-item :index="'/'+ subItem.path" >