登录后我们拿到路由动态路由，后端传的数据可能为这个
{
path: '/index',
meta: {
title: '首页',
icon: 'icon-shouye',
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'index',
component: index
},
//用印中心
{
path: '/chapterCenter',
redirect: {
name: 'applicationChapter'
},
meta: {
title: '用印中心',
icon: 'icon-shuazi',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'chapterCenter',
component: chapterCenter,
children: [{
path: '/applicationChapter',
name: 'applicationChapter',
meta: {
title: '申请用章',
icon: 'icon-ico_zhongyaofangguanli_caigoushenqingdanshenhe',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: applicationChapter
}, {
path: '/approvalProcessing',
name: 'approvalProcessing',
meta: {
title: '审批处理',
icon: 'icon-yinzhang',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: approvalProcessing
}, {
path: '/authorizationManagement',
name: 'authorizationManagement',
meta: {
title: '授权管理',
icon: 'icon-shouquan',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: authorizationManagement
}, {
path: '/auditProcessing',
name: 'auditProcessing',
meta: {
title: '审计处理',
icon: '',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: auditProcessing
}, {
path: '/usageRecord',
name: 'usageRecord',
meta: {
title: '使用记录',
icon: 'icon-number1',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: usageRecord
}, {
path: '/myApplication',
name: 'myApplication',
meta: {
title: '我的申请',
icon: 'icon-wodeshenqing-moren',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: myApplication
},
]
},
//系统管理
{
path: '/systemManagement',
name: 'systemManagement',
redirect: {
name: 'sealManagement'
},
meta: {
title: '系统管理',
icon: 'el-icon-setting',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: systemManagement,
children: [{
path: '/sealManagement',
name: 'sealManagement',
meta: {
title: '印章管理',
icon: 'icon-yinzhang',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: sealManagement
}, {
path: '/sealDetail',
name: 'sealDetail',
meta: {
title: '印章详情',
icon: '',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: sealDetail
}, {
path: '/staffManagement',
meta: {
title: '员工管理',
icon: 'icon-quanxianguanli',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'staffManagement',
component: staffManagement
}, {
path: '/reportManagement',
meta: {
title: '报表管理',
icon: 'icon-baobiaoguanli',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'reportManagement',
component: reportManagement
}, {
path: '/processManagement',
meta: {
title: '流程管理',
icon: 'icon-liucheng',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'processManagement',
component: processManagement
}, {
path: '/privilegeManagement',
meta: {
title: '权限管理',
icon: 'icon-erji-quanxianguanli',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'privilegeManagement',
component: privilegeManagement
}, ]
},
//数据统计
{
path: '/dataStatistics',
meta: {
title: '数据统计',
icon: 'icon-icon-',
status: , //判断当前标签展不展示0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'dataStatistics',
component: dataStatistics,
children: []
},
//平台管理
{
path: '/platformManagement',
redirect: {
name: 'companyManagement'
},
meta: {
title: '平台管理',
icon: 'icon-pingtaiguanli',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'platformManagement',
component: platformManagement,
children: [{
path: '/companyManagement',
meta: {
title: '公司管理',
icon: 'icon-gongsiguanli',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'companyManagement',
component: companyManagement
}, {
path: '/accountManagement',
meta: {
title: '账号管理',
icon: 'icon-zhanghaoguanli',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'accountManagement',
component: accountManagement
}, {
path: '/sealMigration',
meta: {
title: '印章迁移',
icon: 'icon-erji-suoyouqianyi',
status: , //0展示1不展示
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'sealMigration',
component: sealMigration
},
]
}
这个时候我们通常有一个固定路由，这些页面是不需要后台动态获取的，如登录页，错误页面，如下
//固定的路由
const routes = [{
path: '/login',
name: 'login',
meta: {
key: ,
title: '登录',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: login
}, {
path: '/register',
name: 'register',
meta: {
key: ,
title: '注册',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: register
}, {
path: '/forgetPassword',
name: 'forgetPassword',
meta: {
key: ,
title: '忘记密码',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: forgetPassword
}, {
path: '/error',
name: 'error',
meta: {
key: ,
title: '页面不存在',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: error
},
{
path: '/',
name: 'home',
redirect: {
name: 'index'
},
meta: {
title: '首页',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: home,
children: [
//我们后台获取到的路由放在这里
],
}
]
我们把后台获取到的放入上面数组里，之后有个问题就是，后台传给我们的
是字符串，他无法替代
所以我们要用map对后台数据做映射所以我在router文件里新建一个router.js
const login = () => import('@/views/login/index')
const register = () => import('@/views/register/register')
const forgetPassword = () => import('@/views/forgetPassword/forgetPassword')
const error = () => import('@/views/error')
const home = () => import('@/views/home/index')
const index = () => import('@/views/home/index/index')
var map = new Map()
map.set("login", () => import('@/views/login/index'))
map.set("register", () => import('@/views/register/register'))//注册
map.set("forgetPassword", () => import('@/views/forgetPassword/forgetPassword'))//忘记密码
map.set("error", () => import('@/views/error'))
map.set("home", () => import('@/views/home/index'))
map.set("index", () => import('@/views/home/index/index'))
//系统管理
map.set("systemManagement", () => import('@/views/home/systemManagement/systemManagement'))
map.set("sealManagement", () => import('@/views/home/systemManagement/sealManagement/sealManagement')) //印章管理
map.set("sealDetail", () => import('@/views/home/systemManagement/sealDetail/sealDetail')) //印章详情
map.set("staffManagement", () => import('@/views/home/systemManagement/staffManagement/staffManagement')) //员工管理
map.set("processManagement", () => import('@/views/home/systemManagement/processManagement/processManagement')) //流程管理
map.set("reportManagement", () => import('@/views/home/systemManagement/reportManagement/reportManagement')) //报表管理
map.set("privilegeManagement", () => import('@/views/home/systemManagement/privilegeManagement/privilegeManagement')) //权限管理
//数据统计
map.set("dataStatistics", () => import('@/views/home/dataStatistics/dataStatistics'))
//用印中心
map.set("chapterCenter", () => import('@/views/home/chapterCenter/chapterCenter'))
map.set("applicationChapter", () => import('@/views/home/chapterCenter/applicationChapter/applicationChapter')) //申请用章
map.set("approvalProcessing", () => import('@/views/home/chapterCenter/approvalProcessing/approvalProcessing')) //审批处理
map.set("authorizationManagement", () => import('@/views/home/chapterCenter/authorizationManagement/authorizationManagement')) //授权管理
map.set("auditProcessing", () => import('@/views/home/chapterCenter/auditProcessing/auditProcessing')) //审计处理
map.set("usageRecord", () => import('@/views/home/chapterCenter/usageRecord/usageRecord')) //使用记录
map.set("myApplication", () => import('@/views/home/chapterCenter/myApplication/myApplication')) //我的申请
//平台管理
map.set("platformManagement", () => import('@/views/home/platformManagement/platformManagement'))
map.set("companyManagement", () => import('@/views/home/platformManagement/companyManagement/companyManagement')) //公司管理
map.set("accountManagement", () => import('@/views/home/platformManagement/accountManagement/accountManagement')) //账号管理
map.set("sealMigration", () => import('@/views/home/platformManagement/sealMigration/sealMigration')) //印章迁移
//获取动态路由方法
function getRouterList(successCallback){
//登录之后获取动态路由
let userRouter = ''
let role_router=''
role_router=localStorage.getItem('role_router')
userRouter = JSON.parse(role_router).children
digui(userRouter)
function digui(userRouter = []) {
userRouter.forEach(function(item, index) {
if (item.children != null && item.children.length > ) {
digui(item.children)
}
item.component = map.get(item.component)//通过映射找到我们定义好的组件
})
}
//固定的路由
const routes = [{
path: '/login',
name: 'login',
meta: {
key: ,
title: '登录',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: login
}, {
path: '/register',
name: 'register',
meta: {
key: ,
title: '注册',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: register
}, {
path: '/forgetPassword',
name: 'forgetPassword',
meta: {
key: ,
title: '忘记密码',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: forgetPassword
}, {
path: '/error',
name: 'error',
meta: {
key: ,
title: '页面不存在',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: error
},
{
path: '/',
name: 'home',
redirect: {
name: 'index'
},
meta: {
title: '首页',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: home,
children: [
//我们后台获取到的路由放在这里
],
}
]
//把筛选的路由添加进去name: 'home',的children
routes[].children=userRouter
console.log('',routes)
successCallback(routes)
}
export default {
getRouterList
}
把我创建的方法暴露出去
而我们router文件下了index.js里放我们固定的路由表如下
import Vue from 'vue'
import Router from 'vue-router' const login = () => import('@/views/login/index')
const register = () => import('@/views/register/register')
const forgetPassword = () => import('@/views/forgetPassword/forgetPassword')
const error = () => import('@/views/error')
const home = () => import('@/views/home/index')
const index = () => import('@/views/home/index/index') Vue.use(Router) //固定的路由
const routes = [{
path: '/login',
name: 'login',
meta: {
key: ,
title: '登录',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: login
},{
path: '/register',
name: 'register',
meta: {
key: ,
title: '注册',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: register
},{
path: '/forgetPassword',
name: 'forgetPassword',
meta: {
key: ,
title: '忘记密码',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: forgetPassword
},{
path: '/error',
name: 'error',
meta: {
key: ,
title: '页面不存在',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: error
},
{
path: '/',
name: 'home',
redirect: {
name: 'index'
},
meta: {
title: '首页',
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
component: home,
children: [{
path: '/index',
meta: {
title: '首页',
icon: '',
tab_index: , //给头部导航获取的
requireAuth:true,//验证用户能不能跳转这个页面true能false不能
},
name: 'index',
component: index
},
],
}
]
const router =new Router({
routes,
})
export default router
下面是我们如何动态添加路由了在main.js里全局引入刚刚创建的router.js
后面是使用添加动态路由在mian.js里加入以下代码
//防止刷新当前页面时动态路由还没挂在vue上出现空白页面，在挂载之前router.addRoutes(routerlist)
if(localStorage.getItem('role_router')){
let routerlist=[]
//这里是调用router.js里的方法拿到动态路由
Vue.prototype.ROUTER.getRouterList(function(data){
routerlist=data
})
//动态添加路由
router.addRoutes(routerlist)
}
// 路由拦截器
router.beforeEach((to, from, next) => {
console.log(to)
if(localStorage.getItem('role_router')){
if (to.meta.requireAuth==true) {
next();
}else {
Vue.prototype.$message({
message: '您没有权限进入'+to.meta.title+'页面,请联系系统管理员',
type: 'warning'
});
next({
path:from.fullPath,//待在此页面
});
}
}else{
localStorage.setItem('role_router',)
Vue.prototype.$message({
message: '您没有登录请登录',
type: 'warning'
});
next({
path:'/login',//待在此页面
});
} })