VUE全家桶项目实战-- 4.后台首页布局
一.页面布局
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
效果如下图所示:
二.创建Home组件
在components 路径下新建 Home.vue 文件
<template>
<el-container class="home_container">
<!-- 头部区域 -->
<el-header>
<div class="header_logo">
<img src="../assets/mclogo2.jpg" alt />
</div>
<span class="header_logo_span">*****</span>
<el-button type="info" @click="logout" size="small">退出</el-button>
</el-header>
<el-container>
<!-- 导航栏
:width 三目运算符,不同状态下导航栏的宽度
-->
<el-aside :width="isCollapse ? '58px' : '200px'">
<div class="toggle_button" @click="toggleCollapse">|||</div>
<!--
unique-opened 每次只打开一个submenu
collapse 展开折叠效果
collapse-transition 是否展开折叠动画
background-color 背景颜色
text-color 文字颜色
active-text-color 选中文字颜色
-->
<el-menu
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
unique-opened
:collapse="isCollapse"
:collapse-transition="false"
router
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>账户管理</span>
</template>
<!--
index 点击跳转到额页面,再路由的index.js文件中/home路径下配置相应的路径
-->
<el-menu-item index="/user" @click="addTab('用户管理','/user')">用户管理</el-menu-item>
<el-menu-item index="/operator" @click="addTab('运营商管理','/operator')">运营商管理</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>客户方</span>
</template>
<el-menu-item index="/notification" @click="addTab('推送日志','/notification')">推送日志</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>
<span>设备方</span>
</template>
<el-menu-item index="/APIList" @click="addTab('API列表','/APIList')">API列表</el-menu-item>
<el-menu-item index="/APINotification" @click="addTab('API推送','/APINotification')">API推送</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-location"></i>
<span>测试工具</span>
</template>
<el-menu-item index="/encrypt" @click="addTab('加/解密','/encrypt')">加/解密</el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-location"></i>
<span>拓展接口</span>
</template>
<el-menu-item index="/station" @click="addTab('拉取站点','/station')">拉取站点</el-menu-item>
<el-menu-item index="/charge" @click="addTab('充电','/charge')">充电</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 内容区域 -->
<el-main>
<!--
添加标签,
@tab-remove 删除标签事件
@tab-click 点击标签事件
-->
<div class="tabs">
<el-tabs
v-model="editableTabsValue"
type="card"
closable
@tab-remove="removeTab"
@tab-click="skipTab"
>
<el-tab-pane
v-for="(item) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
></el-tab-pane>
</el-tabs>
</div>
<!--
缓存标签,可以点击导航菜单,添加标签业时,保存页面参数,不至于一直刷新页面
但是删除缓存还没有找到简单的办法,后续更新
-->
<keep-alive>
<!--路由占位符-->
<router-view></router-view>
</keep-alive>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
return {
isCollapse: false,
editableTabsValue: "",
editableTabs: [
{
title: "首页",
name: "/welcome"
}
]
};
},
methods: {
//退出,删除token,跳转到登录页面
logout() {
window.sessionStorage.removeItem("token");
this.$router.push("/login");
this.$message.success("退出登录成功");
},
//是否折叠导航栏
toggleCollapse() {
this.isCollapse = !this.isCollapse;
},
//添加标签页
addTab(title, index) {
const length = this.editableTabs.length;
if (length == 0) {
this.editableTabs.push({
title: title,
name: index
});
this.editableTabsValue = index;
} else {
const list = this.editableTabs;
for (var i = 0; i < length; i++) {
const item = list[i];
if (item.title == title) {
this.editableTabsValue = index;
return;
}
}
this.editableTabs.push({
title: title,
name: index
});
this.editableTabsValue = index;
}
},
//删除标签页
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
this.$router.push(this.editableTabsValue);
},
//点击跳转标签页
skipTab() {
this.$router.push(this.editableTabsValue);
}
}
};
</script>
<!--
添加scoped 防止页面样式出现更改
-->
<style lang="less" scoped>
.home_container {
height: 100%;
}
.el-header {
background-color: orange;
// 弹性布局,两侧对齐
display: flex;
justify-content: space-between;
// 左边间距
padding-left: 0px;
// 垂直居中对齐
align-items: center;
}
// 布局容器高度100%
.header_logo {
height: 58px;
width: 58px;
img {
width: 100%;
height: 100%;
}
}
.header_logo_span {
position: absolute;
left: 60px;
color: white;
font-size: 20px;
}
.el-aside {
background-color: #545c64;
.el-menu {
border: none;
}
}
.el-main {
background-color: #eaedf1;
padding: 5px;
.tabs {
margin-bottom: 10px;
}
}
.toggle_button {
background-color: #545c64;
color: white;
font-size: 20px;
text-align: center;
line-height: 25px;
letter-spacing: 5px;
}
.el-main .tabs{
margin-bottom: 0px;
}
.el-tabs_header{
margin: 0;
}
</style>
三.路由index.js 文件配置主页路径
index.js
import Home from '../components/Home.vue'
import Welcome from '../components/welcome.vue'
routes: [
// 路由重定向,访问 / 跳转到登录组件
{path:'/',redirect:'/login'},
{path:"/login",component: Login},
{path:"/home",
component: Home,
//路由重定向
redirect:"/welcome",
children: [
{path:'/welcome',component: Welcome},
]}
]
四.添加welcome组件
在components 路径下添加welcome.vue
<template>
<div>
<!--
这一个页面主要是页面沙盘,数据分析
-->
欢迎界面
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
