原文地址:我的稀土掘金

介绍:defineAsyncComponent 用于拆分应用为更小的块,并仅在需要时再从服务器加载相关组件

官网案例

import { defineAsyncComponent } from 'vue'const AdminPage = defineAsyncComponent(() =>  import('./components/AdminPageComponent.vue'))  

结果展示

大致意思:无法读取未定义的属性

打印一下这个异步组件和普通组件的值


输出的值区别不大

再看官网

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => {  return new Promise((resolve, reject) => {    // ...从服务器获取组件    resolve(/* 获取到的组件 */)  })})// ... 像使用其他一般组件一样使用 `AsyncComp`

这种写法是没有问题的,但是有return 导出该数据

最后改造

import { defineAsyncComponent } from 'vue'const AdminPage = defineAsyncComponent(() =>  return import('./components/AdminPageComponent.vue'))  

结果

官网上异步组件,存在代码疏漏,import 前需要return才会生效