Vue主页面功能详情

1、首先配置好主页面

Home.vue:

<template><el-container class="home-container"><!-- 头部区域 --><el-header><div><img src="../assets/logo.png" alt="" /><span>后台管理系统</span></div><el-button type="info" @click="logout">退出</el-button></el-header><!-- 页面主体区域 --><el-container><!-- 侧边栏 --><el-aside width="200px"><!-- 侧边栏菜单 --><el-menubackground-color="#042a3d"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>导航一的二级菜单</span></template></el-menu-item></el-submenu></el-menu></el-aside><!-- 右侧内容主体 --><el-main>Main</el-main></el-container></el-container>
</template><script>
export default {methods: {// 退出登陆，清除Token，返回loginlogout() {window.sessionStorage.clear()this.$router.push('/login')},},
}
</script><style lang="less" scoped>
.home-container {height: 100%;
}
/* 头部区域 */
.el-header {background-color: #363d41;display: flex;justify-content: space-between; /* 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点 */padding-left: 0;align-items: center; /* 上下居中 */color: #fff;font-size: 20px;> div {display: flex;align-items: center;img {width: 30px;height: 30px;}span {margin-left: 15px;}}
}
.el-aside {background-color: #042a3d;
}
.el-main {background-color: #e8ebec;
}
</style>

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)
// 把弹框Message挂载到vue的原型对象上
Vue.prototype.$message = Message

2、通过api获取左菜单栏数据,存放到menuList中，然后利用v-for渲染到html中

<template><el-container class="home-container"><!-- 头部区域 --><el-header><div><img src="../assets/logo.png" alt="" /><span>后台管理系统</span></div><el-button type="info" @click="logout">退出</el-button></el-header><!-- 页面主体区域 --><el-container><!-- 侧边栏 --><el-aside width="200px"><!-- 侧边栏菜单 --><el-menubackground-color="#042a3d"text-color="#fff"active-text-color="#ffd04b"><!-- 一级菜单 --><el-submenuv-for="item in menuList":key="item.id":index="item.id + ''"><!-- key是给每一个vnode的唯一id--><template slot="title"><i :class="iconsObj[item.id]"></i><span>{{ item.authName }}</span></template><!-- 二级菜单 --><el-menu-itemv-for="subItem in item.children":key="subItem.id":index="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>Main</el-main></el-container></el-container>
</template><script>
export default {data() {return {// 左侧菜单数据menuList: [],iconsObj: {125: 'iconfont icon-iconfontuser',103: 'iconfont icon-tijikongjian',101: 'iconfont icon-shangpin',102: 'iconfont icon-danju',145: 'iconfont icon-baobiao',},}},// 在模板渲染成html前调用方法获取左侧菜单栏数据created() {this.getMenuList()},methods: {// 退出登陆，清除Token，返回loginlogout() {window.sessionStorage.clear()this.$router.push('/login')},// 访问api获取左侧菜单栏数据，把数据添加到menuList中async getMenuList() {const { data: res } = await this.$http.get('menus')if (res.meta.status !== 200) {return this.$message.console.error(res.meta.msg)}this.menuList = res.dataconsole.log(res)},},
}
</script>

3、左侧菜单栏折叠（Collapse）

<template><el-container class="home-container"><!-- 头部区域 --><el-header><div><img src="../assets/logo.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><!-- 侧边栏菜单 --><el-menubackground-color="#042a3d"text-color="#fff"active-text-color="#ffd04b"unique-opened:collapse="isCollapse":collapse-transition="false"><!-- 一级菜单 --><el-submenuv-for="item in menuList":key="item.id":index="item.id + ''"><!-- key是给每一个vnode的唯一id--><template slot="title"><i :class="iconsObj[item.id]"></i><span>{{ item.authName }}</span></template><!-- 二级菜单 --><el-menu-itemv-for="subItem in item.children":key="subItem.id":index="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>Main</el-main></el-container></el-container>
</template><script>
export default {data() {return {// 左侧菜单数据menuList: [],// 左侧菜单图标数组iconsObj: {125: 'iconfont icon-iconfontuser',103: 'iconfont icon-tijikongjian',101: 'iconfont icon-shangpin',102: 'iconfont icon-danju',145: 'iconfont icon-baobiao',},// 左侧菜单是否折叠isCollapse: false,}},// 在模板渲染成html前调用方法获取左侧菜单栏数据created() {this.getMenuList()},methods: {// 退出登陆，清除Token，返回loginlogout() {window.sessionStorage.clear()this.$router.push('/login')},// 访问api获取左侧菜单栏数据，把数据添加到menuList中async getMenuList() {const { data: res } = await this.$http.get('menus')if (res.meta.status !== 200) {return this.$message.console.error(res.meta.msg)}this.menuList = res.dataconsole.log(res)},// 点击按钮，折叠左侧菜单toggleCollapse() {this.isCollapse = !this.isCollapse},},
}
</script><style lang="less" scoped>
.home-container {height: 100%;
}
/* 头部区域 */
.el-header {background-color: #363d41;display: flex;justify-content: space-between; /* 均匀排列每个元素,首个元素放置于起点,末尾元素放置于终点 */padding-left: 0;align-items: center; /* 上下居中 */color: #fff;font-size: 20px;> div {display: flex;align-items: center;img {width: 30px;height: 30px;}span {margin-left: 15px;}}
}
.el-aside {background-color: #042a3d;.el-menu {border-right: none;}
}
.el-main {background-color: #e8ebec;
}
.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>

4、访问Home.vue之后，跳转到子路由welcome.vue页面

router/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/shop_login.vue'
import Home from '../components/shop_home.vue'
import Welcome from '../components/shop_welcome.vue'
Vue.use(VueRouter)// 路由规则
const routes = [// 必须要先登陆{ path: '/', redirect: '/login' },{ path: '/login', component: Login },{path: '/home',component: Home,// home访问之后重定向welcomeredirect: '/welcome',// welcome以子路由显示children: [{ path: '/welcome', component: Welcome }]},
]const router = new VueRouter({routes,
})/*
1、to将要访问的路径
2、from代表从哪个路径跳转过来
3、next是一个函数、表示放行
*/// 挂载路由导航守卫
router.beforeEach((to, from, next) => {if (to.path === '/login') return next()// 获取tokenconst tokenStr = window.sessionStorage.getItem('token')// 判断是否登陆成功过if (!tokenStr) return next('/login')next()
})export default router

Home.vue(路由占位符):

<!-- 右侧内容主体 --><el-main><!-- 路由占位符 --><router-view></router-view></el-main>

5、绑定左侧数据栏路由改造

Home.vue:

<template><el-container class="home-container"><!-- 头部区域 --><el-header><div><img src="../assets/logo.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><!-- 侧边栏菜单 --><el-menubackground-color="#042a3d"text-color="#fff"active-text-color="#ffd04b"unique-opened:collapse="isCollapse":collapse-transition="false":router="true"><!-- 一级菜单 --><el-submenuv-for="item in menuList":key="item.id":index="item.id + ''"><!-- key是给每一个vnode的唯一id--><template slot="title"><i :class="iconsObj[item.id]"></i><span>{{ item.authName }}</span></template><!-- 二级菜单 --><el-menu-itemv-for="subItem in item.children":key="subItem.id":index="'/' + subItem.path"><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>

Vue主页面功能详情相关推荐

VUE路由防卫功能举例
VUE路由防卫功能举例路由防卫的功能在前端应用比较广泛,主要用于前端页面与页面之间的跳转限制,也可以称之为权限控制,我们接下来使用登录页面与主页面使用路由防卫功能. 路由防卫分为全局防卫.路 ...
前端模板-2【vue部分小功能、bug处理】
前端模板[vue部分小功能] 1 Vue部分模板 1.1 vue实现store[存储当前选中页面] 我的习惯用法,大家可自行调整[以存储当前页面名称为例] ①在src下新建文件夹store,并创建co ...
vue antvG6 多功能tree图树图树结构
vue antvG6 多功能tree图树图树结构效果展示代码环境 tree图页代码效果展示 antvg6 树结构效果图 antvg6 tree图搜索节点 antvg6 tree图显示时间,状态 ...
VUE实现记事本功能
VUE实现记事本功能直接上代码: <!DOCTYPE html> <html lang="en"> <script src="https: ...
vue实现打印功能的两种方法/web打印控件
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入安装好以后在main.js文件中引入 1 2 import Print fro ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
Android 11.0 12.0TvSettings系统设置遥控器home键退不出主页面功能的修复
目录 1.概述 2.TvSettings系统设置遥控器home键退不出主页面功能的修复的核心代码
vue实现通讯录功能
vue实现通讯录功能
vue导出excel功能实现
vue导出excel功能实现第一步安装依赖包第二步在项目中assets创建一个新的文件夹js用于存放Blob和Export2Excel两个js文件第三步在你那个组件中使用写事件方法 Expor ...

Vue主页面功能详情

1、首先配置好主页面

2、通过api获取左菜单栏数据,存放到menuList中，然后利用v-for渲染到html中

3、左侧菜单栏折叠（Collapse）

4、访问Home.vue之后，跳转到子路由welcome.vue页面

5、绑定左侧数据栏路由改造

Vue主页面功能详情相关推荐

最新文章

热门文章