VUE全家桶项目实战-- 4.后台首页布局

一.页面布局
二.创建Home组件
三.路由index.js 文件配置主页路径
四.添加welcome组件

一.页面布局

<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 每次只打开一个submenucollapse 展开折叠效果collapse-transition 是否展开折叠动画background-color 背景颜色text-color 文字颜色active-text-color 选中文字颜色--><el-menuclass="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-tabsv-model="editableTabsValue"type="card"closable@tab-remove="removeTab"@tab-click="skipTab"><el-tab-panev-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>

VUE全家桶项目实战-- 4.后台首页布局相关推荐

Vue全家桶-项目实战笔记
写在前面这是我跟着黑马程序员的Vue全家桶-项目实战教程写的一篇笔记,主要记录思路,内容不完整,这里只写到了用户列表管理,进来的友友们可以根据目录,看是否有自己需要的功能这篇笔记记录的是基础vue ...
从头到尾创建一个vue全家桶项目
一.vue全家桶有哪些全家桶:vue, vue-router, vuex, axios, elementui vue-router: 路由 vuex: vue状态机 axios: 网络请求工具 el ...
Vue全家桶项目创建指南
切换到要存放项目的目录中,然后使用vue init webpack 项目目录名创建项目 (1)填写项目名然后回车习惯项目名小 ...
vue全家桶项目搭建（vue-cli 2.9.6+vue-router+vuex+axios）
一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...
小说阅读器未能连接服务器怎么办,vue移动端小说阅读器vue全家桶项目，已部署到服务器可访问预览...
暑假实习了几个月辞职后,闲着无聊自己开发的一个vue小说阅读器链接预览地址,里面的小说接口调用的是追书神器,然后我把里面的vip和收费章节做了处理加了个换源功能,里面需要收费或者vip的小说都可以免 ...
Vue全家桶构建项目
步骤一.安装vue-cli 首先,我们可以通过npm安装vue-clic,前提是我们需要有node环境,如果电脑还没安装node,先安装,可通过 node -v 查询node的版本号,有版本号则已经安 ...
视频教程-Vue全家桶前后台分离实战案例（含资料）-Vue
Vue全家桶前后台分离实战案例(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业.拥有 ...
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
文章目录前言 -- 一级目录解析一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...

VUE全家桶项目实战-- 4.后台首页布局

VUE全家桶项目实战-- 4.后台首页布局

一.页面布局

二.创建Home组件

三.路由index.js 文件配置主页路径

四.添加welcome组件

VUE全家桶项目实战-- 4.后台首页布局相关推荐

最新文章

热门文章