動態路由里，將component字符串改變為路由懶加載方法

一、import寫法 報錯

function loadPageByRoutes(str) { // 傳入的str為 '@/views/Home.vue'  這種格式 
   return () => import(`${str}`) // 要報錯 
}

 

二、改為require寫法,並返回一個resolve ，可行

function loadPageByRoutes(str) { // views文件夾下的Home組件，傳入的格式為 'Home'
  return function (resolve) {
    require([`@/views/${str}.vue`], resolve)
  }
}

 

三，完整方法

 

 

 代碼：

function loadPageByRoutes (str) {
  return function (resolve) {
    require([`@/views/${str}.vue`], resolve)
  }
}

// 遍歷后台傳來的路由字符串，轉換為組件對象
function filterAsyncRouter (asyncRouterMap) {
  const accessedRouters = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'Layout') {
        route.component = Layout
      } else {
        route.component = loadPageByRoutes(route.component)
      }
    }
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })
  return accessedRouters
}

 

路由返回格式：

 

 

 

這里注意根節點path 加 /  ，子節點不加 /

 

具體動態路由實現參考:https://www.jianshu.com/p/4f2566b67989?from=singlemessage