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',//待在此頁面
        });
    }
    
})