Nuxt 3 애플리케이션에 페이지 로더 추가: 단계별 가이드

Question

Nuxt 3를 사용하여 애플리케이션을 구축 중인데 웹사이트가 로드될 때까지 페이지 로더를 추가하고 싶습니다.

Answer 1

이 기사를 바탕으로 작성되었습니다. 간단하지만 제한적인 솔루션과 완전히 맞춤화된 솔루션이 있습니다.

내장

이와 같이 사용할 수 있는 로딩 진행률 표시줄이 포함되어 있습니다

으아아아

하지만 사전 정의된 UI만 있고 이러한 몇 가지 속성을 통해서만 사용자 정의할 수 있습니다

• 색상: 로딩 바의 색상입니다.
• Height: 로딩 바의 높이(픽셀 단위)(기본값은 3).
• 기간: 로딩 막대의 기간(밀리초)(기본값은 2000).
• 제한: 표시 및 숨기기를 밀리초 단위로 제한합니다(기본값 200).

맞춤형 로더

사용자 정의 로더(예: 배경이 있는 전체 화면 스피너)가 필요한 경우 다른 접근 방식이 필요합니다. 이 접근 방식을 사용하면 로더를 생성하고 필요할 때 표시할 수 있습니다.

으아아아

Nuxt3는 page:start 和 page:finish 이벤트에 대한 인터셉터가 포함된 애플리케이션 런타임 후크를 제공합니다. 올바르게 사용하려면 이러한 후크(app.vue 또는 사용자 정의 구성 요소에서)를 다음과 같이 사용해야 합니다.