동적 구성 요소가 완전히 로드된 경우 확인하는 방법

동적 구성 요소가 완전히 로드된 경우 확인하는 방법

다음과 같이 몇 가지 컴포넌트를 동적으로 로드합니다.

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>

동적 구성 요소가 완전히 로딩되었는지 확인하는 방법

사용할 수 있습니다.@hook:mounted컴포넌트가 로드되어 있는지 여부를 나타냅니다.

예.

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

코드 및 상자 확인 예제

언급URL : https://stackoverflow.com/questions/56591941/how-to-know-when-dynamic-component-has-fully-loaded