vue开发中，第二个问题就是实现动态路由，根据后端权限配置获取对应的路由，最终生成对应的菜单。如下：
1、菜单接口返回结果的数据结构
[{“url”: “/system”,”code”: “sysmng”,”name”: “系统管理”,”icon”: “system”,”children”: [{“url”: “menu”,”code”: “sysmenumng”,”name”: “菜单管理”,”icon”: “menu”,”children”: [],”parent”: “menu”}],”parent”: “”}]
2、实现菜单接口
import axios from ‘../../../axios’// 获取导航菜单树export const fetchSidebarMenu = () => { return axios({ url: ‘/system/sidebar’, method: ‘get’ })}
3、在store中调用菜单接口，并根据结果转换成动态路由列表
function buildRouters(routers, menutree) { if (!menutree) { return } menutree.forEach(function(item) { var routerItem = {} if (!item.parent) { routerItem.component = Layout routerItem.path = item.url if (routerItem.path.substring(0, 1) !== ‘/’) { routerItem.path = ‘/’ + routerItem.path } } else { routerItem.path = item.url let cnt = item.component routerItem.vps云服务器component = () => import(`@/views/${cnt}`) } routerItem.name = item.code routerItem.meta = { ‘title’: item.name, ‘icon’: item.icon } routerItem.hidden = item.hidden || false routerItem.alwaysShow = false routerItem.children = [] routers.push(routerItem) buildRouters(routerItem.children, item.children) })}const actions = { generateRoutes({ commit }) { return new Promise((resolve, reject) => { fetchSidebarMenu().then(response => { let accessedRoutes = [] const { data } = response buildRouters(accessedRoutes, data) accessedRoutes.push({ path: ‘*’, redirect: ‘/404’, hidden: true }) commit(‘SET_ROUTES’, accessedRoutes) resolve(accessedRoutes) }).catch(error => { reject(error) }) }) }}
4、在router.beforeEach中拦截，获取动态路由
const hasGetUserInfo = store.getters.user if (hasGetUserInfo) { const hasPermissionRouters = store.getters.permission_routes; if(hasPermissionRouters.length === 0){ const permissionRouters = await store.dispatch(‘permission/generateRoutes’); router.options.routes = store.getters.permission_routes; router.addRoutes(store.getters.permission_routes); next({ …to, replace: true }) }else{ next(); } } 03585811
