大家好，又见面了，我是你们的朋友全栈君。
目录
一 点睛
1 整体布局
1.1 先上下划分，在左右划分。
![电商后台管理系统主页布局[通俗易懂]](https://img-blog.csdnimg.cn/20200825200129193.png)
1.2 菜单分两级，并且可以折叠。
![电商后台管理系统主页布局[通俗易懂]](https://img-blog.csdnimg.cn/20200825200150628.png)
2 通过接口获取菜单数据
通过axios请求拦截器添加token，保证拥有获取数据的权限。
二 代码
1 新增主页 Home.vue
<template>
<!-- 布局组件 -->
<el-container class="home-container">
<!-- 头部区 -->
<el-header>
<div>
<img src="../assets/heima.png" alt="">
<span>电商后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<!-- 页面主体区 -->
<el-container>
<!-- 侧边栏 -->
<el-aside :width="isCollapse?'64px':'200px'">
<div class="toggle-button" @click="toggleCollapse">|||</div>
<!-- 侧边栏菜单区域 -->
<!--
unique-opened:每次只能展开一个菜单
collapse:是否折叠
collapse-transition：折叠动画
router:是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
-->
<el-menu
background-color="#333744"
text-color="#fff"
active-text-color="#409eff"
unique-opened :collapse="isCollapse" :collapse-transition="false" router>
<!-- 一级菜单 -->
<el-submenu :index="item.id+''" v-for="item in menulist" :key="item.id">
<!-- 一级菜单的模板 -->
<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" :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>
<!-- 右侧内容主题区 -->
<el-main>
<!-- 路由占位符 -->
<router-view>
</router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "Home",
// 声明周期函数，一加载该页面，就发起请求
created() {
this.getMenuList()
},
data() {
return {
// 左侧菜单数据
menulist: [],
iconsObj: {
'125': 'iconfont icon-user',
'103': 'iconfont icon-tijikongjian',
'101': 'iconfont icon-shangpin',
'102': 'iconfont icon-danju',
'145': 'iconfont icon-baobiao'
},
// 不折叠
isCollapse: false
}
},
methods: {
logout() {
window.sessionStorage.clear()
this.$router.push("/login")
},
// 获取所有的菜单
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
console.log(this.menulist)
},
// 点击按钮，切换菜单的折叠和展开
toggleCollapse() {
this.isCollapse = !this.isCollapse
}
}
}
</script>
<style scoped>
.home-container {
height: 100%;
}
.el-header {
/* 背景色 */
background-color: #373d41;
/* flex 用法 https://www.cnblogs.com/hellocd/p/10443237.html */
display: flex;
justify-content: space-between;
/* 控制图片的左边距 */
padding-left: 0;
/* 退出不贴边 */
align-items: center;
/* 字体颜色和大小 */
color: #fff;
font-size: 20px;
}
.el-header div {
/* flex 用法 https://www.cnblogs.com/hellocd/p/10443237.html */
display: flex;
align-items: center;
}
.el-header span {
margin-left: 15px;
}
.el-aside {
background-color: #333744;
}
/* 解决侧边栏没对齐问题 */
.el-aside .el-menu {
border-right: none;
}
.el-main {
background-color: #eaedf1;
}
.iconfont {
margin-right: 10px;
}
.toggle-button {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;
}
</style>2 注册组件 element.js
import Vue from 'vue'
// 按需分配各个组件
import {Button, Form, FormItem, Input, Message, Container, Header, Aside, Main,Menu,Submenu,MenuItem} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
// 这里和其他组件不一样，需要通过 prototype 全局挂载 Message
Vue.prototype.$message = Message3 修改main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入阿里的字体图标
import './assets/fonts/iconfont.css'
// 导入全局样式表,使得全局样式生效
import './assets/css/global.css'
// 全局导入axios
import axios from 'axios'
// 设置axios请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// axios请求拦截
axios.interceptors.request.use(config => {
// 为请求头对象，添加 Token 验证的 Authorization 字段
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})
Vue.prototype.$http = axios
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')4 新增欢迎组件 Welcome.vue
<template>
<div>
<h3>Welcome</h3>
</div>
</template>
<script>
export default {
name: "Welcome"
}
</script>
<style scoped>
</style>5 修改路由 index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import Login from "../components/Login";
// 导入Home 组件
import Home from "../components/Home";
// 导入Welcome 组件
import Welcome from "../components/Welcome";
import {renderThumbStyle} from "element-ui/packages/scrollbar/src/util";
Vue.use(VueRouter)
const routes = [
// 路由重定向,当访问/,就会重定向到/login
{
path: '/',
redirect: '/login'
},
// 定义登录路由规则
{
path: '/login',
component: Login
},
// 定义Home的路由规则
{
path: '/home',
component: Home,
redirect: '/welcome',
children: [
{
path: '/welcome',
component: Welcome
}
]
}
]
const router = new VueRouter({
routes
})
// 挂载路由导航守卫
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是个函数，表示放行 next() 放行 next('/login') 强制跳转
router.beforeEach((to, from, next) => {
// 如果用户访问的登录页，直接放行
if (to.path === '/login') return next();
// 从 sessionStorage 中获取到保存的 token 值
const tokenstr = window.sessionStorage.getItem('token')
// 没有 token，强制跳转到登录页
if (!tokenstr) return next('/login')
next()
})
export default router三 测试效果
![电商后台管理系统主页布局[通俗易懂]](https://javaforall.cn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
四 代码参考
https://gitee.com/cakin24/vue_shop
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/143016.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...