vue项目之主页布局
1.背景
2.基本结构
代码:
<template>
<el-container class="home-container">
<!-- 头部-->
<el-header>Header</el-header>
<el-container>
<!--左侧-->
<el-aside width="200px">Aside</el-aside>
<!--主题-->
<el-main>Main</el-main>
</el-container>
</el-container>
</template> <script>
export default {
name: "Home",
methods: {
// 退出登录
logout() {
window.sessionStorage.clear()
this.$router.push("/login")
}
}
}
</script> <style lang="less" scoped>
.home-container {
height: 100%;
} .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;
}
}
} .el-aside {
background-color: #333744; .el-menu {
border-right: none;
}
} .el-main {
background-color: #eaedf1;
}
</style>
3.头部
<template>
<el-container class="home-container">
<!-- 头部-->
<el-header>
<div>
<img src="../assets/ldp.png">
<span>后台管理系统</span>
</div>
<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>
</template> <script>
export default {
name: "Home",
methods: {
// 退出登录
logout() {
window.sessionStorage.clear()
this.$router.push("/login")
}
}
}
</script> <style lang="less" scoped>
.home-container {
height: 100%;
} .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;
}
}
} .el-aside {
background-color: #333744; .el-menu {
border-right: none;
}
} .el-main {
background-color: #eaedf1;
}
</style>
4.左侧菜单
<template>
<el-container class="home-container">
<!-- 头部-->
<el-header>
<div>
<img src="../assets/ldp.png">
<span>后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<el-container>
<!--左侧-->
<el-aside width="200px">
<!--左侧菜单区域-->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
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-1">
<!-- 二级菜单模板区-->
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一.1</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!--主题-->
<el-main>Main</el-main>
</el-container>
</el-container>
</template> <script>
export default {
name: "Home",
methods: {
// 退出登录
logout() {
window.sessionStorage.clear()
this.$router.push("/login")
}
}
}
</script> <style lang="less" scoped>
.home-container {
height: 100%;
} .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;
}
}
} .el-aside {
background-color: #333744; .el-menu {
border-right: none;
}
} .el-main {
background-color: #eaedf1;
}
</style>
5.请求统一配置token
// 设置请求token
axios.interceptors.request.use(config => {
// console.log(config)
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
6.菜单遍历
<template>
<el-container class="home-container">
<!-- 头部-->
<el-header>
<div>
<img src="../assets/ldp.png">
<span>后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<el-container>
<!--左侧-->
<el-aside width="200px">
<!--左侧菜单区域-->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<!-- 一级菜单-->
<el-submenu v-for=" item in menuList" :index="item.id+''" :key="item.id">
<!-- 一级菜单模板区-->
<template slot="title">
<i class="el-icon-location"></i>
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单-->
<el-menu-item :index="itemChild.id+''" :key="itemChild.id" v-for="itemChild in item.children">
<!-- 二级菜单模板区-->
<template slot="title">
<i class="el-icon-location"></i>
<span>{{itemChild.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!--主题-->
<el-main>Main</el-main>
</el-container>
</el-container>
</template> <script>
export default {
name: "Home",
data() {
// 菜单
return {menuList: []}
},
// 模块加载的时候就执行
created() {
this.getMenuList()
},
methods: {
// 退出登录
logout() {
window.sessionStorage.clear()
this.$router.push("/login")
},
// 获取菜单数据
async getMenuList() {
const {data: result} = await this.$http.get('menus')
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.menuList = result.data
}
}
}
</script> <style lang="less" scoped>
.home-container {
height: 100%;
} .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;
}
}
} .el-aside {
background-color: #333744; .el-menu {
border-right: none;
}
} .el-main {
background-color: #eaedf1;
}
</style>
7.只展开一个菜单
8.折叠菜单
代码:
<template>
<el-container class="home-container">
<!-- 头部-->
<el-header>
<div>
<img src="../assets/ldp.png">
<span>后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<el-container>
<!--左侧-->
<el-aside :width="isCollapse?'60px':'200px'">
<div class="toggle-button" @click="toggleBtn"><<>></div>
<!--左侧菜单区域-->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b" unique-opened :collapse="isCollapse" :collapse-transition="false">
<!-- 一级菜单-->
<el-submenu v-for=" item in menuList" :index="item.id+''" :key="item.id">
<!-- 一级菜单模板区-->
<template slot="title">
<i :class="iconObj[item.id]"></i>
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单-->
<el-menu-item :index="itemChild.id+''" :key="itemChild.id" v-for="itemChild in item.children">
<!-- 二级菜单模板区-->
<template slot="title">
<i class="el-icon-menu"></i>
<span>{{itemChild.authName}}</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!--主题-->
<el-main>Main</el-main>
</el-container>
</el-container>
</template> <script>
export default {
name: "Home",
data() {
// 菜单
return {menuList: [],
// 是否折叠左侧菜单
isCollapse:false,
iconObj:{
'125':'el-icon-user',
'103':'el-icon-coordinate',
'101':'el-icon-s-goods',
'102':'el-icon-tickets',
'145':'el-icon-s-operation'
}}
},
// 模块加载的时候就执行
created() {
this.getMenuList()
},
methods: {
// 退出登录
logout() {
window.sessionStorage.clear()
this.$router.push("/login")
},
// 折叠菜单
toggleBtn(){
this.isCollapse=!this.isCollapse
},
// 获取菜单数据
async getMenuList() {
const {data: result} = await this.$http.get('menus')
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.menuList = result.data
}
}
}
</script> <style lang="less" scoped>
.home-container {
height: 100%;
} .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;
}
}
} .el-aside {
background-color: #333744; .el-menu {
border-right: none;
}
} .el-main {
background-color: #eaedf1;
} .toggle-button {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;
}
</style>
9.主页里的首页实现
1.编写主页
2.配置路由
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import Welcome from '@/components/Welcome' Vue.use(Router)
const routerChildren = [
{
path: '/welcome',
name: 'Welcome',
component: Welcome
}
]
const router = new Router({
routes: [
{
path: "/",
redirect: "/login"
},
{
path: '/login',
name: 'Login',
component: Login
}
,
{
path: '/home',
name: 'Home',
redirect: "/welcome",
component: Home,
children: routerChildren
}
]
})
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 从哪里跳转来的
// next 放行 // 判断是不是登录登录,登录路径直接放行
if (to.path == '/login') {
next()
return
}
// 获取token,看是否有token,有token放行
const token = window.sessionStorage.getItem("token")
if (!token) {
next('/login')
return;
}
// 放行
next();
})
export default router
3.设置路由占位
<!--主题-->
<el-main>
<!-- 路由占位符 -->
<router-view></router-view>
</el-main>
10.路由到各个子菜单
1.开启子菜单路由
2.index设置路由地址
3.编写各个路由组件
4.配置路由地址
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import Welcome from '@/components/Welcome'
import User from '@/components/user/User' Vue.use(Router)
const routerChildren = [
{
path: '/welcome',
name: 'Welcome',
component: Welcome
},
{
path: '/users',
name: 'User',
component: User
}
]
const router = new Router({
routes: [
{
path: "/",
redirect: "/login"
},
{
path: '/login',
name: 'Login',
component: Login
}
,
{
path: '/home',
name: 'Home',
redirect: "/welcome",
component: Home,
children: routerChildren
}
]
})
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 从哪里跳转来的
// next 放行 // 判断是不是登录登录,登录路径直接放行
if (to.path == '/login') {
next()
return
}
// 获取token,看是否有token,有token放行
const token = window.sessionStorage.getItem("token")
if (!token) {
next('/login')
return;
}
// 放行
next();
})
export default router
11.子路由激活状态设置
代码:
<template>
<el-container class="home-container">
<!-- 头部-->
<el-header>
<div>
<img src="../assets/ldp.png">
<span>后台管理系统</span>
</div>
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<el-container>
<!--左侧-->
<el-aside :width="isCollapse?'60px':'200px'">
<div class="toggle-button" @click="toggleBtn"><<>></div>
<!--左侧菜单区域-->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
unique-opened router
:collapse="isCollapse"
:collapse-transition="false"
:default-active="defaultActive">
<!-- 一级菜单-->
<el-submenu v-for=" item in menuList" :index="'/'+item.path" :key="item.id">
<!-- 一级菜单模板区-->
<template slot="title">
<i :class="iconObj[item.id]"></i>
<span>{{item.authName}}</span>
</template>
<!-- 二级菜单-->
<el-menu-item
:index="'/'+itemChild.path"
:key="itemChild.id"
v-for="itemChild in item.children"
@click="clickMenuItem('/'+itemChild.path)">
<!-- 二级菜单模板区-->
<template slot="title">
<i class="el-icon-menu"></i>
<span>{{itemChild.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",
data() {
// 菜单
return {
menuList: [],
// 是否折叠左侧菜单
isCollapse: false,
defaultActive:'',
iconObj: {
'125': 'el-icon-user',
'103': 'el-icon-coordinate',
'101': 'el-icon-s-goods',
'102': 'el-icon-tickets',
'145': 'el-icon-s-operation'
}
}
},
// 模块加载的时候就执行
created() {
this.getMenuList()
},
methods: {
// 退出登录
logout() {
window.sessionStorage.clear()
this.$router.push("/login")
},
// 折叠菜单
toggleBtn() {
this.isCollapse = !this.isCollapse
},
// 菜单点击
clickMenuItem(path){
window.sessionStorage.setItem("activePath",path)
this.defaultActive=path
},
// 获取菜单数据
async getMenuList() {
const {data: result} = await this.$http.get('menus')
console.log(result)
if (result.meta.status !== 200) return this.$message.error(result.meta.msg)
this.menuList = result.data
}
}
}
</script> <style lang="less" scoped>
.home-container {
height: 100%;
} .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;
}
}
} .el-aside {
background-color: #333744; .el-menu {
border-right: none;
}
} .el-main {
background-color: #eaedf1;
} .toggle-button {
background-color: #4a5064;
font-size: 10px;
line-height: 24px;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;
}
</style>
完美!
vue项目之主页布局的更多相关文章
- vue后台管理系统——主页布局
电商后台管理系统的功能--页面的整体布局 1. 整体布局 整体布局:先上下划分,再左右划分. 需要使用到ElementUI中提供的Container组件 <el-container> &l ...
- webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 一步一步搭建vue项目
1 安装步骤 创建一个目录,我们这里定义为Vue 在Vue目录打开dos窗体,输入如下命令:vue create myproject 选择自定义 4. 先选择要安装的项目,我们这里选择4个 5 ...
- Vue项目开发相关问题总结
Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- vue项目的骨架及常用组件介绍
vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...
- 在nginx上部署vue项目(history模式)；
在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...
- 创建一个vue项目的过程
创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...
- Vue项目搭建与部署
Vue项目搭建与部署 一,介绍与需求 1.1,介绍 Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue两大核心思想:组件化和数据驱动.组 ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
随机推荐
- Flask web项目 gunicorn部署
Flask web项目 gunicorn部署 安装pip3 install gunicorn 查看版本及是否安装成功flask --versiongunicorn -h ### 需要与app.py启动 ...
- OB_MYSQL UPDATE 优化案例
在工单系统上看到有一条SQL问题还没解决,直接联系这位同学看看是否需要帮忙. 慢SQL: UPDATE A SET CORPORATION_NAME = ( SELECT DISTINCT CORPO ...
- 天翼云centos7.6安装redis6.2.6
以下部分的具体略: 1.wget获取源码 2.make 这里重点说下,如何使用 utils/install_server.sh脚本 使用install_service.sh添加服务 有了这个脚本,那么 ...
- Atcoder Beginner Contest 321 G - Electric Circuit 题解 - 状压dp | 指定最低位
为了更好的阅读体验,请点击这里 题目链接:G - Electric Circuit 看到了 \(N\) 的数据范围,因此是显然的状压 dp. 不妨设 \(f_S\) 为仅使用 \(S\) 集合中的所有 ...
- 10分钟掌握Python缓存
全文速览 python的不同缓存组件的使用场景和使用样例 cachetools的使用 项目背景 代码检查项目,需要存储每一步检查的中间结果,最终把结果汇总并写入文件中 在中间结果的存储中 可以使用co ...
- ACPI Table 与 Device Tree
背景 在分析Linux内核驱动的时候,有时候会看到一些acpi字样的接口. 之前一直没搞明白ACPI是什么,现在知道了. Reference : https://www.cnblogs.com/jun ...
- Node.js - fs.path模块
首先我有话说,是谁说的学完ajax就可以去vue了,太天真了我,学会js钻出来个ajax,学完ajax钻出来个node.js这一步步的,当然node不会学到太深入把表面的认识一下就可以了,这之后可能更 ...
- 存储器与CPU的连接
存储器与CPU连接分主要看前五步 1.首先根据给出的地址范围写出二进制码 2.确定芯片的类型和数量 3.确定地址线 4.确定片选信号 要注意MREQ是低电平有效,要连到138译码器的低电平
- 人类高质量 Java 学习路线【一条龙版】
Java 学习路线一条龙版 by 鱼皮. 原创不易,请勿抄袭,违者必究! 大家好,我是鱼皮.现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了.大部分的博主推荐资源 ...
- oeasy教您玩转python - 003 - # - 继续运行
继续运行 回忆上次内容 在解释器里玩耍 print("Hello World") 1+1 编写了 py 文件 运行了 py 文件 这次我们继续丰富这个文件 分析 py 文件 我 ...