54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
|
/**
|
||
|
|
* 페이지 이동 시 자동 로딩 처리 플러그인
|
||
|
|
* 모든 페이지 이동에서 GlobalLoading을 자동으로 표시하고
|
||
|
|
* DOM 렌더링 완료 후 자동으로 숨깁니다.
|
||
|
|
*/
|
||
|
|
export default defineNuxtPlugin(() => {
|
||
|
|
const { startLoading } = useLoading();
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
let loadingStopFn: (() => void) | null = null;
|
||
|
|
let isNavigating = false;
|
||
|
|
|
||
|
|
// 페이지 이동 시작 시 로딩 시작
|
||
|
|
router.beforeEach((to, from) => {
|
||
|
|
// 같은 페이지 내에서의 이동은 무시
|
||
|
|
if (to.path === from.path) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 이미 로딩 중이면 무시
|
||
|
|
if (isNavigating) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
isNavigating = true;
|
||
|
|
loadingStopFn = startLoading("페이지를 불러오는 중...");
|
||
|
|
});
|
||
|
|
|
||
|
|
// 페이지 이동 완료 후 로딩 종료
|
||
|
|
router.afterEach(() => {
|
||
|
|
if (!isNavigating || !loadingStopFn) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// DOM이 완전히 렌더링된 후 로딩 종료
|
||
|
|
nextTick(() => {
|
||
|
|
setTimeout(() => {
|
||
|
|
loadingStopFn?.();
|
||
|
|
loadingStopFn = null;
|
||
|
|
isNavigating = false;
|
||
|
|
}, 200);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 에러 발생 시 로딩 강제 종료
|
||
|
|
router.onError(() => {
|
||
|
|
if (loadingStopFn) {
|
||
|
|
loadingStopFn();
|
||
|
|
loadingStopFn = null;
|
||
|
|
isNavigating = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|