H5W3
当前位置:H5W3 > 其他技术问题 > 正文

一个很能被喷的 js 问题

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

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"),//还是只能这样...
},
...还有几十个
]

请大佬表演!

回答

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

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


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

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

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

本文地址:H5W3 » 一个很能被喷的 js 问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址