vue-cli3|vue-cli3 + elementui 搭建后台管理界面(二)-首页

登录跳转-路由导航守卫
修改 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(); } })

后台整体框架
src/components/Container.vue
.app { $solidBorder: 1px solid #eee; $sideCollapsedWidth: 66px; $sideExpandedWidth: 230px; font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; font-size: 1em; width: 100%; height: 100%; min-width: 900px; border: $solidBorder; display: flex; display: -webkit-flex; flex-flow: row nowrap; &-side { width: 230px; height: 100%; &-left { background-color: rgb(238, 241, 246); } &-logo { background: #00A4FF; height: 60px; text-align: center; } &-fold { padding-right: 15px; font-size: 24px; } &-collapsed { width: 66px!important; .app-side-logo { width: 66px; } } &-expanded { width: 230px!important; } } &-header { width: 100%; height: 60px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; border-bottom: $solidBorder; &-userinfo { position: absolute; right: 0; margin-right: 25px; display: flex; flex-flow: row nowrap; height: 60px; justify-content: flex-start; align-items: center; } } &-body { font-size: 1em; width: 100%; height: 100%; padding: 20px; overflow-y: scroll; } &-footer { width: 100%; height: 60px; } }

在 router 导入容器组件
修改 src/router/index.js 为
import Vue from 'vue' import Router from 'vue-router' import Login from '../views/Login.vue' import Container from '../components/Container.vue'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'Container', component: Container }, { path: '/login', name: 'Login', component: Login }, ] })

修改 src/App.vue:

自定义css
新建 src/assets/css/index.scss
html { height: 100%; }body { position: relative; top: 0; left: 0; margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; } .inline-block { display: inline-block; }

【vue-cli3|vue-cli3 + elementui 搭建后台管理界面(二)-首页】在 src/main.js 中引入该文件
import './assets/css/index.scss'

页面效果:

vue-cli3|vue-cli3 + elementui 搭建后台管理界面(二)-首页
文章图片
1.png vue-cli3|vue-cli3 + elementui 搭建后台管理界面(二)-首页
文章图片
2.png
知识点
1 会话存储 使用html5的 sessionStorage 对象临时保存会话
// 保存会话 sessionStorage.setItem('user', username) // 删除会话 sessionStorage.removeItem('user', username)

2 将所有未登录会话重定向到 /login 用 vue-router 的 beforeEach 实现
beforeEach 方法接收三个参数:
  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
文章改编自大神博客:https://www.cnblogs.com/wbjxxzx/p/9942867.html,仅作为学习实践。

    推荐阅读