问题描述
使用 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,您不必指定。
为什么?
解决方法
关于为什么模块嵌套在 { default } 对象中:这是因为 Nuxt 使用 ES6 样式模块。 ES6 风格的模块编写如下:
export default {
// some object
};
默认值并不是您可以拥有的唯一属性。 More syntax。
关于为什么 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 已经有自己的路由系统,可以将您的代码拆分为每个页面的块。文档 here。