vue 动态路由生成

// 用于将字符串组件名转换为实际组件的函数
function resolveComponent(componentName) {
  // 根据你的项目配置，动态导入组件
  // 这里假设你有一个映射对象，将组件名映射到实际组件
  const componentsMap = {
    Layout: () => import('@/layout'), // Layout组件
    Second: () => import('@/components/second'), // Second组件
    // ...其他组件映射
  };

  // 如果组件在映射中，则返回对应的组件，否则返回默认组件或错误处理
  return componentsMap[componentName] || componentsMap['DefaultComponent'];
}

export const loadView = (view) => { // 路由懒加载
  return (resolve) => require([`@/views/${view}`], resolve)
}
  //获取动态路由
function computedRoutes(routesConfig, isChildren = false) {
  return routesConfig.map(routeConfig => {
    let haveChildren = routeConfig.children && routeConfig.children.length
    let component
    //是否有子组件
    if (haveChildren) {
    //本身是否是二级组件
      if (isChildren) {
        component = resolveComponent('second')
      } else {
       //本身是否是一级组件
        component = resolveComponent('Layout')
      }
    } else {
      component = loadView(routeConfig.component )
    }
    routeConfig = {
      children: haveChildren ? computedRoutes(routeConfig.children, true) : undefined,
      component,
      path: routeConfig.url,
      name: routeConfig.permission,
      meta: {
        title: routeConfig.name,
        icon: routeConfig.icon,
        hidden: routeConfig.showStatus == 1//tags使用,和下方hidden使用地方不同，但代码冗余，需后期优化
      },
      hidden: routeConfig.showStatus == 1,
    }
    return routeConfig
  })
}```

之前引入组件使用的 ()=>import('@/view/${component }')，但是系统一直报Cannot find module '@/views/undefined'，然后查了很多资料，判断是webpack配置问题，但是一直无法解决。现在改成了require引入组件，成功运行。

但是在Vue Router中，为了实现路由懒加载，通常推荐使用动态 import() 表达式，因为它符合ES模块标准，且能够更好地与现代打包工具集成，支持代码分割和按需加载，提高应用的初始加载速度。而使用 require 配合 require.ensure 或者例子中的 require([path], callback) 形式，虽然也能达到懒加载的目的，但这种方式更偏向于CommonJS风格，逐渐被ES模块的动态导入所取代。
因此，对于Vue项目，更现代和推荐的做法是使用动态 import() 语法来实现路由的懒加载。如果有大佬讲解一下怎么使用import去完成动态路由添加就更好了