vue.js - 组件动态导入在 router.js 中不起作用

Question

使用 Nuxt.js，router.js我正在尝试导入我的路由组件：

{
  path: '/',
  component: () => import(/* webpackChunkName: "index" */ '~/pages/index.vue')
}

我收到此错误：

组件中未定义的渲染函数或模板：匿名

我遇到了别人的 Nuxt.js 项目，他们在最后添加了以下内容，并且它可以工作：

{
  path: '/',
  component: () => import(/* webpackChunkName: "index" */ '~/pages/index.vue').then(m => m.default || m)
}

我的返回对象import()如下所示：

在另一个 Vue.js 非 Nuxt 项目中，类似的情况import()如下所示：

在这两种情况下，组件都嵌套在某个“默认”对象中。但是对于 Nuxt.js，您似乎必须显式导入该对象，而对于常规 Vue.js，您不必指定它。

为什么？

score 1 · Accepted Answer

关于为什么模块嵌套在 { default } 对象中：这是因为 Nuxt 使用 ES6 样式模块。ES6 风格的模块编写如下：

export default {
  // some object
};

默认不是您可以拥有的唯一属性。更多语法。

关于为什么 vue-router 在没有 .default 的情况下工作，这是因为代码比 Nuxt 使用的代码更通用。Nuxt 已经发布了它自己的构建器并且总是使用 ES6 模块。

另一方面，vue-router 不知道它将如何构建。所以为了更容易使用，vue-router 会自动检查模块是否为 ES6。

const resolve = once(resolvedDef => {
  if (isESModule(resolvedDef)) {
    resolvedDef = resolvedDef.default
  }
  // ...
}

您可能已经知道，在 Nuxt 项目中使用 router.js 文件非常少见，因为 Nuxt 已经有自己的路由系统，可以将您的代码分成每个页面的块。文档在这里。

1 回答 1