Question

我想知道如何检查异步组件何时加载。

通常我会像这样加载我的组件：

Vue.component(
     'booking-overlay', 
     () => import('@/components/BookingOverlayAsync.vue')
);

使用这样的方法不起作用：

Vue.component(
   'booking-overlay',
    () => import('@/components/BookingOverlayAsync.vue').then(() => {
        console.log('component has loaded');
    })
);

它导致以下错误：

未捕获（承诺）TypeError：无法在sureCtor上读取未定义的属性'__esModule'。

该组件不再加载，但是promise可以解决。通过添加then，它似乎无法再解决承诺。

如何才能全局注册该异步组件并检查JavaScript的此组件块何时已加载？

很明显，我可以简单地通过设置全局组件来做到这一点：

import('@/components/BookingOverlayAsync.vue').then(() => {
    console.log('Chunk loaded');
});

这似乎是一个非常丑陋的解决方案。

Answer 1

因为.then函数返回的第二个Promise对象不会继续将异步加载的组件传递给vue lib本身。

Vue.component函数期望 second 参数应该是一个返回诺言的函数，其中解析的数据必须是异步加载的组件本身。

请尝试以下操作：

Vue.component(
        'booking-overlay',
        () => import('@/components/BookingOverlayAsync.vue').then(component => {
            console.log('component has loaded');
            return component;
        })
    );

在异步组件加载时进行Vue检查

1 个答案: