关于vue动态路由加载component,报了关于严格模式的问题

・ᴗ・NJE0C
  • 1
新手上路,请多包涵

后台读取生成动态路由时,二级菜单注册component,一直无法成功。
image.png
如果component为Layout就可以成功。

错误:
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.o

尝试关闭严格模式但是失败了。

代码:

export function addAsyncRouter(routers){
  const accessedRouters = routers.filter(router => {
    if (router.component) {
      if (router.component === 'Layout') {
        router.component = Layout
      } else {
        const component = router.component
        router.component = () => import('@/views/' + component)
      }
    }
    if (router.children && router.children.length) {
      router.children = filterAsyncRouter(router.children)
    }else{
      router.children = []
    }
    return true
  })
  return accessedRouters
}

感觉是这句的问题

router.component = () => import("@/views/" + component)

之前还试过

router.component = resolve => require(["@/views/" + component], resolve)

也还是一样的问题

想请教各位大佬,这个还有别的格式么

回复
阅读 1.1k
3 个回答

component函数中用到了caller、callee或arguments属性,这些属性在严格模式下是有限制的。

这和引入方法无关(import或require),优先推荐修改component函数,去掉里面的caller、callee或arguments属性,拥抱新特性、新规范,如果component函数不方便修改(如来自第三方插件),那么需要在webpack中配置移除严格模式(开发模式和生产模式都需要)

不管能不能访问,也不建议动态拼一个import的字符串,这会导致打包的时候,webpack会把views下所有的文件都遍历一遍,为了把这些模块都暴露出来,会在首屏文件里生成这些模块的一个映射表,导致首屏文件很大,而且打包很慢

可以试下
image.png

完整的
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏