elementui 搭建布局页面路由_vue+elementui搭建后台管理界面

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 方法的调用参数。

修改 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 的布局容器