vue 权限路由动态加载

 

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

后端返回的数据：

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.前端需要把这个数据变成路由动态加载

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.添加路由

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