近期在搞一個會議健康申報系統時，要搞一個後臺，用到了vue-element-admin模板，使用的是PanJianChen(原始碼地址：https://github.com/PanJiaChen/vue-admin-template)

第一步：當前是下載原始碼了，下載地址：https://github.com/PanJiaChen/vue-admin-template

第二步：修改登入頁面，登入介面（/store/modules/admin.js/login()），根據實際情況修改使用者資訊介面(/store/modules/admin.js/getInfo())

第三步：修改許可權路由

1.刪減路由檔案中的配置，export const constantRoutes保留基本的/login、/404

2.動態路由清空，export const asyncRoutes=[]

3./store/modules/permission.js下定義生成路由方法

/**
 * 後臺查詢的選單資料拼裝成路由格式的資料
 * @param routes
 */
export function generaMenu(routes, data) {

    data.forEach(item => {
        let menu = {
            path: item.url,
            children: [],
            name: 'menu_' + item.id,
            meta: { title: item.name, id: item.id ,icon:item.icon}
        }
        // console.log(item.url.indexOf('dashboard'))

        // console.log(item.children)
        if (item.children) {
            // console.log(item.children.length)
            if (item.children.length > 0) {
                menu.redirect = item.children[0].url
                menu.component = Layout
            } else {
                // menu.component = () => import(`@/views${item.url}/index`)
                menu.component = () => Promise.resolve(require(`@/views${item.url}`).default)

            }
            if (item.url && item.url.indexOf('dashboard') != -1) {
                menu = {
                    path: '/',
                    component: Layout,
                    redirect: '/dashboard',
                    children: [{
                        path: 'dashboard',
                        name: 'Dashboard',
                        component: () => import('@/views/dashboard/index'),
                        meta: { title: '控制檯', icon: 'dashboard' }
                    }]
                }
            }
            generaMenu(menu.children, item.children)
        } else {
            console.log('沒有children')
        }
        routes.push(menu)
    })
}

　　actions中根據後臺的介面載入動態路由

actions: {
        GenerateRoutes({ commit }, data) {
            return new Promise(resolve => {

                const loadMenuData = []
                getAuthMenu().then(res => {
                    let data = res.data
                    console.log('menu=>', data)
                    console.log('asyncRoutes=>>', asyncRoutes)
                    let newRoutes = []//此處清空之前的路由
                    Object.assign(loadMenuData, data)
                    generaMenu(newRoutes, loadMenuData)
                    newRoutes.push({ path: '*', redirect: '/404', hidden: true })
                    let accessedRouters = newRoutes || []
                    console.log('accessedRouters', accessedRouters)
                    commit('SET_ROUTERS', accessedRouters)
                    resolve()
                })

            })
        },
        reset_routers({ commit }) {
            return new Promise(resolve => {
                commit('RESET_ROUTERS')
                resolve()
            })
        }
    }

　　第四步、在/permission.js中新增動態路由

router.beforeEach(async (to, from, next) => {
	// start progress bar
	NProgress.start()

	// set page title
	document.title = getPageTitle(to.meta.title)

	// determine whether the user has logged in
	const hasToken = getToken()

	if (hasToken) {
		if (to.path === '/login') {
			// if is logged in, redirect to the home page
			next({ path: '/' })
			NProgress.done()
		} else {
			const hasGetUserInfo = store.getters.name
			if (hasGetUserInfo) {
				next()
			} else {
				try {
					// get user info
					await store.dispatch('admin/getInfo')

					store.dispatch('GenerateRoutes', {}).then(() => { // 生成可訪問的路由表
						router.addRoutes(store.getters.addRouters) // 動態新增可訪問路由表
						console.log('to=',store.getters.addRouters)
						next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
						NProgress.done()
					})

					// next()
				} catch (error) {
					// remove token and go to login page to re-login
					await store.dispatch('admin/resetToken')
					Message.error(error || 'Has Error')
					next(`/login?redirect=${to.path}`)
					NProgress.done()
				}
			}
		}
	} else {
		/* has no token*/

		if (whiteList.indexOf(to.path) !== -1) {
			// in the free login whitelist, go directly
			next()
		} else {
			// other pages that do not have permission to access are redirected to the login page.
			next(`/login?redirect=${to.path}`)
			NProgress.done()
		}
	}
})

　　然後你就可心情地玩了。