javascript - Vue 检查异步组件何时加载
问题描述
我想知道如何检查异步组件何时加载。
通常我会像这样加载我的组件:
Vue.component(
'booking-overlay',
() => import('@/components/BookingOverlayAsync.vue')
);
使用这样的东西不起作用:
Vue.component(
'booking-overlay',
() => import('@/components/BookingOverlayAsync.vue').then(() => {
console.log('component has loaded');
})
);
它导致以下错误:
未捕获(承诺中)类型错误:无法在 ensureCtor 读取未定义的属性“__esModule”。
该组件不再加载,但承诺确实解决了。通过添加then
它似乎不再解决承诺本身。
如何全局注册此异步组件并检查此组件的 JavaScript 块何时加载?
显然,我可以简单地与设置全局组件一起执行此操作:
import('@/components/BookingOverlayAsync.vue').then(() => {
console.log('Chunk loaded');
});
不过,这似乎是一个非常丑陋的解决方案。
解决方案
因为 .then 函数返回的第二个 promise 对象不会继续将异步加载的组件传递给 vue lib 本身。
Vue.component 函数期望第二个参数应该是一个返回 promise 的函数,其中解析的数据必须是异步加载的组件本身。
请尝试以下操作:
Vue.component(
'booking-overlay',
() => import('@/components/BookingOverlayAsync.vue').then(component => {
console.log('component has loaded');
return component;
})
);
推荐阅读
- installation - 使复选框的行为类似于单选按钮,但默认选择其中一个部分 - NSIS 组件页面
- bash - 如何使 apt 假设是并强制 bash 脚本中的所有安装是
- python - 在一个非常大的表上对 Google Cloud SQL 的超慢 SQLAlchemy 查询
- amazon-cloudformation - 如何使用 AWS CloudFormation 模板更正此错误
- javascript - 如何使用新文件中的内容更改网页上的 SVG 元素?
- angular - Vendor.js 文件节点模块拆分成块
- reactjs - TypeError:无法读取未定义的属性“primaryColor”-Typescript,样式化组件(tsx)
- ios - AudioKit v5 如何在同一个输入节点上使用 AmplitudeTap 和 NodeRecorder
- django - 通过 Django Rest Framework 中的相关模型强制执行权限
- reactjs - MUI sx 道具中的动态样式?