如何知道动态组件何时完全加载

Question

所以我正在像这样动态加载一些组件：

const Page0 = () => import("@/components/pages/tutorial/Pages/Page0")

const Page1 = () => import("@/components/pages/tutorial/Pages/Page1")

还有 10 个这样的页面，将根据路由参数调用它们。

我想知道我如何知道某个页面是否已加载，以创建加载屏幕，以及我如何知道它何时被切换。

这就是我完全使用它的方式。

<template>

    <div>

        <component :is="current_page"></component>

    </div>

</template>

<script>

    const Page0 = () => import("@/components/pages/tutorial/Pages/Page0/index.vue")

    const Page1 = () => import("@/components/pages/tutorial/Pages/Page1/index.vue")

    export default {

        scrollToTop:

            true,

        components:

            {

                Page0,

                Page1,

            },

        computed:

            {

                current_page ()

                {

                    return "Page" + this.page

                }

            },

        asyncData ({

            route, store, env, params, query, req, res, redirect, error

        })

        {

            return {

                page:

                    params.page

            }

        }

    }

</script>