1、总体布局
home.vue中template进行布局,头部区域和页面主体区域。使用了element ui的el-container el-header el-aside el-menu el-submenu el-main这些组件,需要引入element ui并注册组件。
2、获取数据
首先通过接口数据获取菜单数据,通过axios请求拦截器添加token,保证获取数据的权限。(注意:需要授权的API,必须在请求头中使用authorization字段提供token令牌,后端验证token是否正确。
import axios from 'axios'
axios.interceptors.request.use(config => {
console.log(config);
NProgress.start()
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/"
//需要授权的API,必须在请求头中使用Authorization提供token令牌
//通过axios请求拦截器添加token,保证获取权限
//在request拦截器中显示进度条
首先通过接口获取左侧菜单数据menulist;在created阶段执行获取参数的函数,保证页面刷新之前获取到数据。methods里面定义该函数。
created(){
// 在此处执行你要执行的函数
this.getMenuList();
this.activePath=window.sessionStorage.getItem('activePath')
},
sync getMenuList(){
//console.log('222');
const {data:res}= await this.$http.get('menus');
console.log(res);
if(res.meta.status!==200) return this.$message.error(res.meta.msg);
//将获取的数据存放至menulist中
this.menulist=res.data;
//console.log(res.data);
}
然后使用双层for循环将渲染菜单(v-for=“item in menulist”)
打印获取到的数据,看下其结构。数组长度为5,我们会将menulist的第一项里面的authName显示在一级菜单({{item.authName}},第二层遍历是对item的children(v-for=“subItem in item.children”)操作同上。
<el-aside :width="isCollapse?'64px':'200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :unique-opened="true" :collapse="isCollapse" :router="true"
:default-active="activePath">
<!-- 一级菜单 -->
<el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id" active-text-color="#409EFF">
<!-- 一级菜单的模板区域 -->
<template slot="title">
<!-- 图标 -->
<i :class="iconsObj[item.id]"></i>
<!-- 文本 -->
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" @click="saveNavState('/'+subItem.path)" :key="subItem.id">
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{{subItem.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
3、点击激活侧边栏
需要注意的是,点击某侧边栏子项,会激活并点亮对应栏,下面几个属性用来实现侧边栏的主要功能,跳转功能(router)和点击高亮(default-active)。
属性 | 功能 |
---|---|
default-active | 当前激活菜单的 index |
index | 唯一标志 |
router | 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 |
首先点击二级菜单,将会index 作为 path,并保存对应index,绑定到default-active上。
@click=“saveNavState(’/’+subItem.path)” 在二级菜单上点击,触发事件saveNavState,传入子菜单栏的path,使用 sessionStorage 创建一个本地存储的 name/value 对。事件saveNavState在methods里定义。
设置router,根据俄日集采的那的index直接设置路由链接。
点击事件时,也会考虑在页面渲染之前获取 activePath。
//保存链接的激活状态
saveNavState(activePath){
window.sessionStorage.setItem('activePath',activePath);
this.activePath=activePath;
}
created(){
this.activePath=window.sessionStorage.getItem('activePath')
}
4、样式设置
1、添加分类的图标,利用数组iconObj,每个菜单都有一个id,对应其图标类别(item.id)
<i :class="iconsObj[item.id]"></i>
data中定义数组
iconsObj:{
'125':'iconfont icon-usercenter',
'103':'iconfont icon-add-cart',
'101':'iconfont icon-browse',
'102':'iconfont icon-search',
'145':'iconfont icon-phone',
}
<template slot="title">
<!-- 图标 -->
<i class="el-icon-menu"></i>
<!-- 文本 -->
<span>{{subItem.authName}}</span>
</template>
2、设置每次只打开一个菜单项
:unique-opened="true"
3、菜单栏的折叠与展开
绑定isCollapse,点击切换按钮来改变其值,实现折叠和展开。
:collapse="isCollapse"
默认不折叠
isCollapse:false
点击侧边栏上边的|||,触发折叠事件
<div class="toggle-button" @click="toggleCollapse">|||</div>
对isCollapse取反
toggleCollapse(){
this.isCollapse=!this.isCollapse;
}
最重要的一个样式之一:侧边栏的宽度不能定死,应随侧边栏折叠与否变化,即根据isCollapse的值变化
这里是通过对width的值绑定数值,而且根据iscollapse的值动态决定宽度,如果没有这步,样式会丑很多。
<el-aside :width="isCollapse?'64px':'200px'">
5、还有个主页的退出功能的实现
基于token的方式实现退出比较简单,只需要销毁本地的token即可,这样后续不携带token,必须push到login页面,重新登陆,主要代码如下:
触发点击事件logout
<el-button type="info" @click="logout">退出</el-button>
logout(){
//清空
window.sessionStorage.clear();
//跳转
this.$router.push('/login')
}