vue+elementui搭建后台管理界面(2首页)

使用html5的 sessionStorage 对象临时保存会话

// 保存会话 sessionStorage.setItem(\'user\', username) // 删除会话 sessionStorage.removeItem(\'user\', username) 2 将所有未登录会话重定向到 /login

用 vue-router 的 beforeEach 实现
beforeEach 方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

修改 src/main.js 加入

router.beforeEach((to, from, next) => { if(to.path === \'/login\'){ sessionStorage.removeItem(\'user\'); } var user = sessionStorage.getItem(\'user\'); if(!user && to.path !== \'/login\'){ next({ path: \'/login\' }) }else{ next(); } }) 3 编写首页

使用 elementui 的布局容器

<el-container> <el-aside>Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container>

新建 src/container/Container.vue

<template> <div> <el-container> <el-aside :class="isCollapse ? \'app-side-collapsed\' : \'app-side-expanded\'"> <div> <img src="http://www.likecs.com/@/assets/logo.png" :width="isCollapse ? \'60\' : \'60\'" /> </div> <div> <!-- 我是样例菜单 --> <el-menu default-active="1-4-1" @open="handleOpen" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i></i> <span slot="title">导航一</span> </template> <el-menu-item-group> <span slot="title">分组一</span> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <span slot="title">选项4</span> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i></i> <span slot="title">导航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </div> </el-aside> <el-container> <el-header> <div @click.prevent="toggleSideBar"> <i v-show="!isCollapse"></i> <i v-show="isCollapse"></i> </div> <!-- 我是样例菜单 --> <el-menu default-active="1" mode="horizontal" @select="handleSelect" active-text-color="#409EFF"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"> <a href="#">订单管理</a> </el-menu-item> </el-menu> <div> <el-dropdown trigger="hover" :hide-on-click="false"> <span> {{ username }} <i></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>我的消息</el-dropdown-item> <el-dropdown-item>设置</el-dropdown-item> <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </el-header> <el-main> <template> <router-view/> </template> </el-main> </el-container> </el-container> </div> </template> <script> export default { name: \'Container\', data() { return { username: \'\', isCollapse: false } }, methods: { toggleSideBar() { this.isCollapse = !this.isCollapse }, logout: function () { this.$confirm(\'确认退出?\', \'提示\', {}) .then(() => { sessionStorage.removeItem(\'user\'); this.$router.push(\'/login\'); }) .catch(() => { }); }, handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, handleSelect(key, keyPath) { console.log(key, keyPath); }, }, mounted: function () { let user = sessionStorage.getItem(\'user\'); if (user) { this.username = user; } }, } </script> <style> </style> 4 在 router 导入容器组件