vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）

登录后我们拿到路由动态路由，后端传的数据可能为这个

{
                    path: '/index',
                    meta: {
                        title: '首页',
                        icon: 'icon-shouye',
                        tab_index: 0, //给头部导航获取的
                        requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },
                    name: 'index',
                    component: index
                },
                //用印中心
                {
                    path: '/chapterCenter',
                    redirect: {
                        name: 'applicationChapter'
                    },
                    meta: {
                        title: '用印中心',
                        icon: 'icon-shuazi',
                        status: 0, //0展示1不展示
                        tab_index: 1, //给头部导航获取的
                        requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },
                    name: 'chapterCenter',
                    component: chapterCenter,
                    children: [{
                            path: '/applicationChapter',
                            name: 'applicationChapter',
                            meta: {
                                title: '申请用章',
                                icon: 'icon-ico_zhongyaofangguanli_caigoushenqingdanshenhe',
                                status: 0, //0展示1不展示
                                tab_index: 1, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            component: applicationChapter
                        }, {
                            path: '/approvalProcessing',
                            name: 'approvalProcessing',
                            meta: {
                                title: '审批处理',
                                icon: 'icon-yinzhang',
                                status: 0, //0展示1不展示
                                tab_index: 1, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            component: approvalProcessing
                        }, {
                            path: '/authorizationManagement',
                            name: 'authorizationManagement',
                            meta: {
                                title: '授权管理',
                                icon: 'icon-shouquan',
                                status: 0, //0展示1不展示
                                tab_index: 1, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            component: authorizationManagement
                        }, {
                            path: '/auditProcessing',
                            name: 'auditProcessing',
                            meta: {
                                title: '审计处理',
                                icon: '',
                                status: 0, //0展示1不展示
                                tab_index: 1, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            component: auditProcessing
                        }, {
                            path: '/usageRecord',
                            name: 'usageRecord',
                            meta: {
                                title: '使用记录',
                                icon: 'icon-number1',
                                status: 0, //0展示1不展示
                                tab_index: 1, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            component: usageRecord
                        }, {
                            path: '/myApplication',
                            name: 'myApplication',
                            meta: {
                                title: '我的申请',
                                icon: 'icon-wodeshenqing-moren',
                                status: 0, //0展示1不展示
                                tab_index: 1, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            component: myApplication
                        },
    
                    ]
                },
                //系统管理
                {
                    path: '/systemManagement',
                    name: 'systemManagement',
                    redirect: {
                        name: 'sealManagement'
                    },
                    meta: {
                        title: '系统管理',
                        icon: 'el-icon-setting',
                        status: 0, //0展示1不展示
                        tab_index: 2, //给头部导航获取的
                        requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },
                    component: systemManagement,
                    children: [{
                        path: '/sealManagement',
                        name: 'sealManagement',
                        meta: {
                            title: '印章管理',
                            icon: 'icon-yinzhang',
                            status: 0, //0展示1不展示
                            tab_index: 2, //给头部导航获取的
                            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },
                        component: sealManagement
                    }, {
                        path: '/sealDetail',
                        name: 'sealDetail',
                        meta: {
                            title: '印章详情',
                            icon: '',
                            status: 0, //0展示1不展示
                            tab_index: 2, //给头部导航获取的
                            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },
                        component: sealDetail
                    }, {
                        path: '/staffManagement',
                        meta: {
                            title: '员工管理',
                            icon: 'icon-quanxianguanli',
                            status: 0, //0展示1不展示
                            tab_index: 2, //给头部导航获取的
                            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },
                        name: 'staffManagement',
                        component: staffManagement
                    }, {
                        path: '/reportManagement',
                        meta: {
                            title: '报表管理',
                            icon: 'icon-baobiaoguanli',
                            status: 0, //0展示1不展示
                            tab_index: 2, //给头部导航获取的
                            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },
                        name: 'reportManagement',
                        component: reportManagement
                    }, {
                        path: '/processManagement',
                        meta: {
                            title: '流程管理',
                            icon: 'icon-liucheng',
                            status: 0, //0展示1不展示
                            tab_index: 2, //给头部导航获取的
                            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },
                        name: 'processManagement',
                        component: processManagement
                    }, {
                        path: '/privilegeManagement',
                        meta: {
                            title: '权限管理',
                            icon: 'icon-erji-quanxianguanli',
                            status: 0, //0展示1不展示
                            tab_index: 2, //给头部导航获取的
                            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                        },
                        name: 'privilegeManagement',
                        component: privilegeManagement
                    }, ]
                },
                //数据统计
                {
                    path: '/dataStatistics',
                    meta: {
                        title: '数据统计',
                        icon: 'icon-icon-',
                        status: 0, //判断当前标签展不展示0展示1不展示
                        tab_index: 3, //给头部导航获取的
                        requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },
                    name: 'dataStatistics',
                    component: dataStatistics,
                    children: []
                },
                //平台管理
                {
                    path: '/platformManagement',
                    redirect: {
                        name: 'companyManagement'
                    },
                    meta: {
                        title: '平台管理',
                        icon: 'icon-pingtaiguanli',
                        status: 0, //0展示1不展示
                        tab_index: 4, //给头部导航获取的
                        requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                    },
                    name: 'platformManagement',
                    component: platformManagement,
                    children: [{
                            path: '/companyManagement',
                            meta: {
                                title: '公司管理',
                                icon: 'icon-gongsiguanli',
                                status: 0, //0展示1不展示
                                tab_index: 4, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            name: 'companyManagement',
                            component: companyManagement
                        }, {
                            path: '/accountManagement',
                            meta: {
                                title: '账号管理',
                                icon: 'icon-zhanghaoguanli',
                                status: 0, //0展示1不展示
                                tab_index: 4, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            name: 'accountManagement',
                            component: accountManagement
                        }, {
                            path: '/sealMigration',
                            meta: {
                                title: '印章迁移',
                                icon: 'icon-erji-suoyouqianyi',
                                status: 0, //0展示1不展示
                                tab_index: 4, //给头部导航获取的
                                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
                            },
                            name: 'sealMigration',
                            component: sealMigration
                        },
    
                    ]
                }
    
            

这个时候我们通常有一个固定路由，这些页面是不需要后台动态获取的，如登录页，错误页面，如下

//固定的路由
    const routes = [{
            path: '/login',
            name: 'login',
            meta: {
                key: 1,
                title: '登录',
                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },
            component: login
        }, {
            path: '/register',
            name: 'register',
            meta: {
                key: 1,
                title: '注册',
                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },
            component: register
        }, {
            path: '/forgetPassword',
            name: 'forgetPassword',
            meta: {
                key: 1,
                title: '忘记密码',
                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },
            component: forgetPassword
        }, {
            path: '/error',
            name: 'error',
            meta: {
                key: 1,
                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 > 0) {
                digui(item.children)
            }
            item.component = map.get(item.component)//通过映射找到我们定义好的组件
        })
    }
    
    //固定的路由
    const routes = [{
            path: '/login',
            name: 'login',
            meta: {
                key: 1,
                title: '登录',
                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },
            component: login
        }, {
            path: '/register',
            name: 'register',
            meta: {
                key: 1,
                title: '注册',
                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },
            component: register
        }, {
            path: '/forgetPassword',
            name: 'forgetPassword',
            meta: {
                key: 1,
                title: '忘记密码',
                requireAuth:true,//验证用户能不能跳转这个页面true能false不能
            },
            component: forgetPassword
        }, {
            path: '/error',
            name: 'error',
            meta: {
                key: 1,
                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[4].children=userRouter
    console.log('3333333',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: 1,
            title: '登录',
            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },
        component: login
    },{
        path: '/register',
        name: 'register',
        meta: {
            key: 1,
            title: '注册',
            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },
        component: register
    },{
        path: '/forgetPassword',
        name: 'forgetPassword',
        meta: {
            key: 1,
            title: '忘记密码',
            requireAuth:true,//验证用户能不能跳转这个页面true能false不能
        },
        component: forgetPassword
    },{
        path: '/error',
        name: 'error',
        meta: {
            key: 1,
            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: 0, //给头部导航获取的
                    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',0)
        Vue.prototype.$message({
            message: '您没有登录请登录',
            type: 'warning'
        });
        next({
            path:'/login',//待在此页面
        });
    }
    
})