1. 实现后台首页的基本布局 (全部)
- 新建 Home.vue 组件 进行基础设置
- 做顶部的布局,以及左侧导航的布局
- 设置 css 结构
<template>
<el-container>
<!-- 顶部导航栏 -->
<el-header>
<div class="home_header">
<img src="../assets/heima.png" alt="">
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="btnOut">退出</el-button>
</el-header>
<!-- 页面主题区域 -->
<el-container>
<!-- 侧边栏导航 -->
<el-aside :width="getCollapse ? '64px' : '200px'">
<div class="getChange" @click="getChange">
<span>|||</span>
</div>
<!-- 侧边栏菜单区域 -->
<el-menu
background-color="#545c64"
text-color="#fff"
active-text-color="blue"
:unique-opened="true"
:collapse="getCollapse"
:collapse-transition="false"
router
:default-active="activePath"
>
<!-- 一级菜单 -->
<el-submenu v-for="item in sideMenu" :key="item.id" :index="item.id +''">
<!-- 模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="sideIcon[item.id]"></i>
<!-- 文本 -->
<span>{
{
item.authName }}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="'/'+subItem.path" @click="getActive('/'+subItem.path)">
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{
{
subItem.authName }}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 右侧主体区域 -->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
// 左侧菜单数据
sideMenu: [],
sideIcon: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
},
// 是否折叠
getCollapse: false,
// 被激活的链接地址
activePath: ''
}
},
// 生命周期函数,一进入页面就自动加载
created() {
this.getSideMenu()
this.activePath = window.sessionStorage.getItem('active')
},
methods: {
btnOut() {
window.sessionStorage.clear()
this.$router.push('/login')
},
// 获取所有的菜单
async getSideMenu() {
const {
data: res } = await this.$http.get('menus')
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.$message.success(res.meta.msg)
this.sideMenu = res.data
},
// 点击按钮,切换菜单的折叠和展开
getChange() {
this.getCollapse = !this.getCollapse
},
// 保持链接的激活状态
getActive(url) {
window.sessionStorage.setItem('active', url)
this.activePath = url
}
}
}
</script>
<style lang="less" scoped>
.el-container {
height: 100%;
}
.getChange {
font-size: 18px;
color: white;
text-align: center;
line-height: 36px;
letter-spacing: 0.2em;
cursor: pointer;
}
.el-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0;
background-color: #373d41;
.home_header {
display: flex;
align-items: center;
span {
padding-left: 16px;
font-size: 20px;
color: #fff;
}
}
}
.el-container {
background-color: #333744;
}
.el-menu {
border-right: none
}
.el-main {
background-color: #fff;
}
.iconfont {
padding-right: 6px;
}
</style>
2. 设置 axios请求拦截器
- 后台除了登录接口之外,都需要token权限验证,我们可以通过添加axios请求拦截器来添加token,以保证拥有获取数据的权限在main.js中添加代码,在将axios挂载到vue原型之前添加下面的代码
- 在 main 里面设置
// 请求拦截器(在请求到达服务器之前,会携带里面的参数)
axios.interceptors.request.use(config => {
// console.log(config)
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
3. 在main.js 里面添加 axios的全局使用
添加 axios 组件
import axios from 'axios'
把 axios 设置到全局的 prototype 里面去 并改叫 $http
Vue.prototype.$http = axios
在 main里面用 axios 而在.vue 文件中 用 this.$http
4. 设置激活子菜单样式
通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色
通过更改菜单项模板(template)中的i标签的类名,可以将左侧菜单栏的图标进行设置,我们需要在项目中使用第三方字体图标,需要import iconfont.css
在数据中添加一个sideIcon:
// 左侧菜单数据
sideMenu: [],
sideIcon: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
},
然后将图标类名进行数据绑定,绑定iconsObj中的数据:
iconObj[item.id] 点的话 点不了变量 [item.id]里面可以放变量
<!-- 图标 -->
<i :class="sideIcon[item.id]"></i>
- 为了保持左侧菜单每次只能打开一个,显示其中的子菜单,我们可以在el-menu中添加一个属性unique-opened
- 或者也可以数据绑定进行设置(此时true认为是一个bool值,而不是字符串) :unique-opened=“true”
5. 制作侧边菜单栏的伸缩功能
在菜单栏上方添加一个div
<div class="getChange" @click="getChange">
<span>|||</span>
</div>
设置 css 样式
// 点击按钮,切换菜单的折叠和展开
getChange() {
this.getCollapse = !this.getCollapse
},
6. 在后台首页添加子级路由
-
新增子级路由组件Welcome.vue。
-
制作好了Welcome子级路由之后,我们需要将所有的侧边栏二级菜单都改造成子级路由链接
-
我们只需要将el-menu的router属性设置为true就可以了,此时当我们点击二级菜单的时候,就会根据菜单的index属性进行路由跳转,如: /110,
使用index id来作为跳转的路径不合适,我们可以重新绑定index的值为 :index="’/’+subItem.path"
{
path: '/home',
component: Home,
redirect: '/welcome'