记vue多级目录一次教训

问题描述：实现3级或多于3级目录时，无法成功加载指定的页面组件，页面path，component等都设置正确
原始创建动态路由代码如下：

function buildRouters(routers, menutree) {
  if (!menutree) {
    return
  }
  menutree.forEach(function(item) {
    let routerItem = {}
    if (!item.parent) {
      。。。。。。
    } else {
      // @A 
      routerItem.path = item.url
      let cnt = item.component
      routerItem.component = () => import(`@/views/${cnt}`)
    }
    routerItem.name = item.code
    routerItem.meta = { 'title': item.name, 'icon': item.icon }
    if (item.active_menu) {
      routerItem.meta.activeMenu = item.active_menu
    }
    routerItem.hidden = item.hidden || false
    routerItem.alwaysShow = false
    if (!routerItem.children) {
      routerItem.children = []
    }
    routers.push(routerItem)
    buildRouters(routerItem.children, item.children)
  })
}

经过分析，是在//@A地方出问题，此处会根据配置加载component，此时如果component没有设置时，则会出现记载不出，所以//@A需改成如下代码

     // @A 
	 routerItem.path = item.tag.url
      if (item.tag.component) {
        const cnt = item.tag.component
        routerItem.component = () => import(`@/views/${cnt}`)
      } else {
      	// SubLayout是一个子布局组件，一般情况是Layout中的一部分
        routerItem.component = SubLayout
      }

粗心浪费了一晚时间，哎…