一个很能被喷的 js 问题

Question

我现在有一个这样的路由配置

let route = [
    {
      path: "/pages/login/login",
      component: () => import('@/pages/login/login'),
    },
    {
      path: "/page/repair/repair",
      component: () => import('@/page/repair/repair'),
    },
    ...还有几十个
]

path 和 component 的路径是对应的
想着用函数生成

const createComponent = function(path){
    //发现这个也不行....直接报错了,害是不是这个方案不行
    return ()=>import(`@${path}`)
}
let route = [
    {
      path: "/pages/login/login",
      component: createComponent('这的参数不会了,想获取object 的 path 属性的 value'),
    },
    {
      path: "/page/repair/repair",
      component: createComponent("/page/repair/repair"),//还是只能这样...
    },
    ...还有几十个
]

请大佬表演!

Answer 1

之前做动态生成路由，同样遇到这种问题。参考了vue动态路由异步加载import组件，加载不到module的问题，问题解决了。

解决办法：

可以通过字符串模板来提供部分信息给webpack，例如import(`@/${path}`), 这样编译时会编译所有@/views下的模块，但运行时确定path的值才会加载，从而实现懒加载。

如果写了@给webpack还是不能识别，那么可能你需要多些几级的路径，如import(`@/views/${path}`)

亲测有用。

Answer 2

和规范的不同, webpack 的 import 必须要能基本确定导入的内容是什么, 比如说你可以在 import 用通配符或者正则导入符合规则的一批文件
但是对于目前的createComponent函数中路径的值完全是运行时产生的, webpack 编译时显然无法得知到底要导入哪个, 所以会产生错误

以下是原答案 (这个方案也是无法工作的, 勿用)

---

const paths = [
    '/pages/login/login',
    '/pages/repair/repair'
];

const route = paths.map(path => ({path, component: createComponent(item)}))

当然这种无法处理有 children 的情况