vue实现动态菜单之组件注入

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter, type) {
  return asyncRouterMap.filter(route => {
    if (route.component) {
      // Layout ParentView 组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else {
        route.component = loadView(route.component)
        //动态添加菜单时,不能用import进行组件引入---只能通过resolve异步加载
        // route.component= () => import('@/view/'+route.component)
      }
    }
    if (route.children != null && route.children && route.children.length) {
      //判断是否有子组件-继续过滤子组件
      route.children = filterAsyncRouter(route.children, route, type)
    } else {
      delete route['children']
      delete route['redirect']
    }
    return true
  })
}
//用来生成子组件component
export const loadView = (view) => { // 路由懒加载
  return (resolve) => require([`@/views/${view}`], resolve)
}

在动态添加路由的时候,不能使用import() =>方式来进行子组件的注入,会导致路由组件注入失败.这里可以使用(resolve) => require([@/views/${view}], resolve)异步加载的方式注入组件,实现路由子组件的注入.