前言

目录

前言一、主页布局1.1 整体布局1.2 头部区域布局1.3 左侧菜单布局1.3.1 静态布局1.3.2 通过axios请求拦截器来进行权限验证1.3.3 通过axios获取左侧菜单数据1.3.4 通过v-for双重循环渲染左侧菜单1.3.5 其他设置1.3.6 实现左侧菜单的收缩功能1.4 右侧主体区域布局1.4.1 新增默认子级路由组件1.4.2 给左侧菜单添加路由链接1.4.3 给左侧菜单添加点击高亮效果总结

一、主页布局

1.1 整体布局

打开src-components-home.vue文件，进行布局，这里使用element-ui的布局组件：<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>接着要设计样式和背景颜色，默认情况下，跟element-ui组件同名的类名可以帮助我们快速的给对应的组件添加样式，如下所示：.home-container {height: 100%;}.el-header{background-color:#373D41;}.el-aside{background-color:#333744;}.el-main{background-color:#eaedf1;}注意：如果发现组件没有生效，是因为没有按需导入element-ui组件，要在plugins-element.js中导入

最终的效果图如下：

1.2 头部区域布局

template部分代码如下：<!-- 头部区域 --><el-header><div><img src="../assets/heima.png" alt=""><span>电商后台管理系统</span></div><el-button type="info" @click="logout">退出</el-button></el-header>style部分代码如下：.el-header {background-color: #373d41;display: flex;justify-content: space-between;padding-left: 0;align-items: center;color: #fff;font-size: 20px;> div {display: flex;align-items: center;span {margin-left: 15px;}}}

1.3 左侧菜单布局

1.3.1 静态布局

这里使用el-menu组件，静态部分代码如下：<!-- 侧边栏 --><el-aside width="200px"><!-- 侧边栏菜单 --><el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"><!-- 一级菜单 --><el-submenu index="1"><!-- 一级菜单模板 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>导航一</span></template><!-- 二级子菜单 --><el-menu-item index="1-4-1"><!-- 二级菜单模板 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>子菜单一</span></template></el-menu-item></el-submenu></el-menu></el-aside>

1.3.2 通过axios请求拦截器来进行权限验证

后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限在main.js中添加代码如下：//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息axios.interceptors.request.use(config=>{//为请求头对象，添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem("token")return config})

1.3.3 通过axios获取左侧菜单数据

script部分代码如下所示：export default {data() {return {// 左侧菜单数据menuList: []}},created() {// 在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}}}

1.3.4 通过v-for双重循环渲染左侧菜单

<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"><!-- 一级菜单 --><el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id"><!-- 一级菜单模板 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>{{item.authName}}</span></template><!-- 二级子菜单 --><el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id"><!-- 二级菜单模板 --><template slot="title"><!-- 图标 --><i class="el-icon-location"></i><!-- 文本 --><span>{{subItem.authName}}</span></template></el-menu-item></el-submenu></el-menu>

1.3.5 其他设置

1、通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色2、通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置3、通过在el-menu中添加一个属性unique-opened，可以保持左侧菜单每次只能打开一个，显示其中的子菜单

1.3.6 实现左侧菜单的收缩功能

首先要添加一个按钮绑定点击事件来控制菜单的收缩：<div class="toggle-button" @click="toggleCollapse">|||</div>接着在data中定义一个标志位，默认为false，当点击按钮时将其取反：// 点击按钮，切换菜单的折叠与展开toggleCollapse() {this.isCollapse = !this.isCollapse},然后给侧边栏菜单el-menu绑定属性：<!-- 侧边栏菜单，:collapse="isCollapse"（设置折叠菜单为绑定的 isCollapse 值），:collapse-transition="false"（关闭默认的折叠动画） --><el-menu :collapse="isCollapse" :collapse-transition="false" >最后还要设置左侧菜单的宽度： <el-aside :width="isCollapse ? '64px' : '200px'">

1.4 右侧主体区域布局

1.4.1 新增默认子级路由组件

首先在src-components中新建welcome.vue组件，该组件是每次打开网站时默认显示的内容然后要在右侧内容主体中添加路由占位符：<!-- 右侧内容主体 --><el-main><!-- 路由占位符 --><router-view></router-view></el-main>接着在router.js中导入子级路由组件，并设置路由规则以及子级路由的默认重定向：const router = new Router({routes: [{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome', component: Welcome },]}]})

1.4.2 给左侧菜单添加路由链接

给el-menu添加router属性即可实现路由跳转，如下所示：<el-menu router >当点击二级菜单时，会根据菜单的index属性进行路由跳转，我们需要重新绑定index的值，如下所示：<!-- 二级菜单 --><el-menu-item :index="'/' + subItem.path">

1.4.3 给左侧菜单添加点击高亮效果

当点击二级菜单的时候，我们需要高亮显示当前显示的页面我们可以通过设置el-menu的default-active属性来设置当前激活菜单的index但是default-active属性也不能写死，固定为某个菜单值所以我们可以先给所有的二级菜单添加点击事件,并将path值作为方法的参数@click="saveNavState('/'+subItem.path)"在saveNavState方法中将path保存到sessionStorage中saveNavState( path ){//点击二级菜单的时候保存被点击的二级菜单信息window.sessionStorage.setItem("activePath",path);this.activePath = path;}然后在数据中添加一个activePath绑定数据，并将el-menu的default-active属性设置为activePath最后在created中将sessionStorage中的数据赋值给activePaththis.activePath = window.sessionStorage.getItem("activePath")

总结

至此我们的主页的总体布局就完成了，下一步要开发右侧主体显示的其他页面组件，比如用户模块，商品模块等