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

在 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;
}

在 src/main.js 中引入该文件

import './assets/css/index.scss'

页面效果:

1.png

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，仅作为学习实践。