我想知道如何检查异步组件何时加载。
通常我会像这样加载我的组件:
Vue.component(
'booking-overlay',
() => import('@/components/BookingOverlayAsync.vue')
);
使用这样的东西是行不通的:
Vue.component(
'booking-overlay',
() => import('@/components/BookingOverlayAsync.vue').then(() => {
console.log('component has loaded');
})
);
它会导致以下错误:
Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined at ensureCtor..
组件不再加载,但 promise 确实解决了。通过添加 then
它似乎不再解决 promise 本身。
如何全局注册此异步组件并检查此组件的 JavaScript block 何时已加载?
显然我可以简单地通过设置全局组件来完成此操作:
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;
})
);
关于javascript - Vue 检查异步组件何时加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52888296/