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

所以我像这样动态地加载一些组件:

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>
番长猴子2020/04/03 10:55:25

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

您可以@hook:mounted每个组件动态使用或不使用它来指示该组件已加载。

例如

<component :is="current_page" @hook:mounted="doSomething"></component>

校验码和框示例