vue-router实现路由管理的一些笔记
2019-03-24 10:35
417 查看
router.beforeEach((to, from, next) => { let token = sessionStorage.getItem('token'); //通过存入一个token来判断用户是否登录 if (!token && to.path != '/login') { sessionStorage.removeItem('token'); next({path: '/login'}) //如果没有seesion 和不是从登录进来的 全部重定向为login console.log('没有sess 或者不是登录进路由' + sessionStorage.getItem('token')) } else { if (sessionStorage.getItem("isLogin") == "1" && to.path == '/login') { next({path: '/showActivity'}); Message({ message: '已返回最前,重新登录请点击右上角头像注销', type: 'warning' }); console.log('登录状态为已登录 且返回login时 给他重定向为showActivity') } else { next() } if (sessionStorage.getItem("vuexState")) { sessionStorage.removeItem("vuexState") switch (sessionStorage.getItem('token')) { //这里由于存入session JSON格式转过后vue解析不了转换过后的路由component //采取暴力添加routes case 'admin': console.log('执行了admin刷新') router.addRoutes([ { path: '/', component: Home, name: '管理活动', iconCls: 'el-icon-message', //图标样式class children: [ { path: '/main', component: Main, name: '主页', hidden: true }, { path: '/showActivity', component: showActivity, name: '活动管理', meta: {role: ['admin', 'checkUser']} }, ] }, { path: '*', hidden: true, redirect: { path: '/404' } } ]) break; case 'wx_op': console.log('执行了wx-op刷新') router.addRoutes([ { path: '/', component: Home, name: '管理活动', iconCls: 'el-icon-message', //图标样式class children: [{ path: '/main', component: Main, name: '主页', hidden: true }, { path: '/showActivity', component: showActivity, name: '活动管理', meta: {role: ['admin', 'checkUser']} }, { path: '/addActivity', component: addActivity, name: '活动配置', meta: {role: ['admin']} }, { path: '/user', component: user, name: '列表' }, ] }, { path: '/', component: Home, name: '会员管理', iconCls: 'fa fa-id-card-o', children: [ { path: '/showVip', component: showVip, name: '会员概览' }, { path: '/page4', component: Page4, name: '红包统计' } ] }, { path: '/', component: Home, name: '扫码管理', iconCls: 'fa fa-address-card', children: [{ path: '/scanCode', component: scanCode, name: '扫码概览' }] }, { path: '/', component: Home, name: '公众号配置', iconCls: 'fa fa-bar-chart', children: [{ path: '/echarts', component: echarts, name: 'echarts' }] }, { path: '/404', component: NotFound, name: '', hidden: true }, { path: '*', hidden: true, redirect: { path: '/404' } } ]) break; } console.log("执行了刷新下的路由加载") // } } console.log('路由循环正常') } })
相关文章推荐
- vue2笔记 ― vue-router路由懒加载的实现
- 使用Vue-Router 2实现路由功能
- 【Vue】Vue-Router2 实现路由功能
- vue-router实现路由懒加载
- vue通过 vue.mixin(混合)实现 任意页面记录滚动条位置(路由router.query参数一致) 并跳转到上次的位置
- 浅析前端路由简介以及vue-router实现原理
- vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
- Vue-Router2.X多种路由实现方式总结
- vue-router--路由传参结合请求数据(页面底部按钮跳转功能实现参考)
- vue入门——8Vue插件(前端路由vue-router)(状态管理Vuex)
- 使用Vue-Router 2实现路由功能
- vue-router 与 elementUI导航栏 配合实现路由设置小技巧
- 使用Vue-Router 2实现路由功能实例详解
- 使用Vue-Router 2实现路由功能
- vue.js vue-router如何实现无效路由(404)的友好提示
- vue-router路由懒加载的实现(解决vue项目首次加载慢)
- vue-router 如何在当前路由下重新点击当前路由的router-link实现刷新
- vue-router的router-view不能渲染;vue2.0中遇到的路由上的一些坑
- Vue-router中beforeEach钩子函数实现路由拦截,判断用户权限跳转至登录页面。
- 使用Vue-Router 2实现路由功能