[Nuxt3] navigateTo

Nuxt3에서는 클라이언트 사이드 라우팅을 쉽게 처리할 수 있도록 navigateTo 함수를 제공합니다. 이는 useRouter().push()와 유사하지만, Nuxt 3에서 제공하는 최적화된 방식으로 동작합니다.

navigateTo의 주요 특징

• 클라이언트 사이드 네비게이션: 페이지가 완전히 새로고침되지 않고 Vue Router를 통해 전환됩니다.
• Promise 반환: 비동기적으로 동작하며, 네비게이션 완료 후 후속 작업을 수행할 수 있습니다.
• 외부 링크 지원: absolute: true 옵션을 사용하면 외부 URL로 리디렉트할 수 있습니다.

 

navigateTo의 기본 사용법

<script setup>
const goToHome = () => {
  navigateTo("/");
};
</script>

<template>
  <button @click="goToHome">홈으로 이동</button>
</template>

위 코드에서 navigateTo("/")를 호출하면 사용자를 루트 페이지로 이동시킵니다.

 

옵션 활용

type NavigateToOptions = {
  replace?: boolean;
  external?: boolean;
  force?: boolean;
  open?: boolean;
};

1. replace 옵션 사용

replace: true를 설정하면 브라우저의 히스토리 스택을 변경하지 않고 현재 페이지를 새로운 페이지로 대체합니다.

navigateTo("/dashboard", { replace: true });

이렇게 하면 back 버튼을 눌러도 이전 페이지로 돌아갈 수 없습니다.

2. external 옵션 사용

외부 링크로 이동할 때 absolute 옵션을 사용하면 window.location.href를 직접 변경하는 효과가 있습니다.

navigateTo("https://example.com", { external: true });

3. force 옵션 사용

현재 페이지와 같은 경로로 다시 이동하려고 하면 네비게이션이 무시됩니다. force: true를 설정하면 동일한 경로라도 강제로 새로고침 없이 다시 실행됩니다.

navigateTo("/profile", { force: true });

4. open 옵션 사용

open: true를 설정하면 새로운 탭에서 링크를 엽니다. external: true와 함께 사용해야 합니다.

navigateTo("https://example.com", { external: true, open: true });