vue 权限路由动态加载

 

1.正常的思路前端把常用的路由和需要后端权限的路由分开，然后需要权限的路由又后端直接返回数据，前端处理成路由动态加载的数据。

后端返回的数据：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

let menuList = [{     "id": "5fd1d86a8bf1c51a5cc1a76d",     "path": "/test",     "component": "Layout",     "name": "test",     "redirect": "/test/admin",     "hidden": false,     "meta": {       "title": "合作商管理",       "roles": ["admin"],       "icon": "test",       "noCache": true     },     "children": [{       "id": "5fd1d86a8bf1c51a5cc1a76e",       "path": "admin",       "component": "/test/index",       "name": "test",       "hidden": false,       "meta": {         "title": "合作商列表",         "roles": ["admin"],         "icon": "partner",         "noCache": true       }     }]   }]

　　2.前端需要把这个数据变成路由动态加载

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

let filterRouters = filterAsyncRouter(menuList) //遍历后台传来的路由字符串，转换为组件对象 function filterAsyncRouter (routes) {   const accessedRouters = routes.filter(route => {     if (route.component === 'Layout') {       route.component = Layout     } else {       if (route.path.indexOf(':') > -1) {         const component = route.component         route.component = resolve => require([`@/views${component}`], resolve)         //  route.component = () => import(`@/views${route.component.substr(0, route.component.indexOf(':') - 1)}`)       }       else {         const component = route.component         route.component = resolve => require([`@/views${component}`], resolve)         //  route.component = () => import(`@/views${component}`)       }     }     if (route.children && route.children.length) {       route.children = filterAsyncRouter(route.children)     }     return true   })   return accessedRouters }

　　3.添加路由

?

1 2 3

router.options.routes = store.getters.routes router.addRoutes(store.getters.routes) next({ ...to, replace: true }

说明：
1.在2中标红的地方是因为webpack 版本不一样，导致用import 加载不了，这块研究了半天。

 

参考文案：https://www.cnblogs.com/mark5/p/12101906.html