navigateTo 함수는 프로그래밍 방식으로 페이지를 탐색하는 헬퍼 함수입니다. navigateTo의 네 가지 사용 방법을 알아보겠습니다.
Vue 컴포넌트 내에서 사용하는 방식
Nuxt의 컴포넌트에서 navigateTo를 사용하는 방식입니다. 페이지 이동을 위해 navigateTo를 호출할 수 있습니다.
<template>
<button @click="goToPage">Go to Home Page</button>
</template>
<script setup>
import { navigateTo } from 'nuxt/app'
function goToPage() {
navigateTo('/')
}
</script>Route Middleware 내에서 사용하는 방식
미들웨어에서 특정 조건에 따라 경로를 리다이렉트할 때 navigateTo를 사용할 수 있습니다. 아래 예제는 인증이 필요한 페이지에 접근할 때 로그인 페이지로 리다이렉트하는 경우입니다.
// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
const user = useAuth() // 가정: 인증 상태 확인하는 함수
if (!user.isLoggedIn) {
return navigateTo('/login')
}
})외부 URL로 연결하는 방식
navigateTo는 외부 URL로 연결할 때도 사용할 수 있습니다. 아래 코드는 외부 URL로 연결하는 예시입니다.
<template>
<button @click="goToExternalSite">Go to Google</button>
</template>
<script setup>
import { navigateTo } from 'nuxt/app'
function goToExternalSite() {
navigateTo('https://www.google.com', { external: true })
}
</script>외부 url로의 이동을 위해 external 옵션을 true로 설정하였습니다.
open 속성을 사용하는 방식
open 속성을 사용하면 새 탭에서 페이지를 여는 방식으로 navigateTo를 사용할 수 있습니다.
<template>
<button @click="openInNewTab">Open New Tab</button>
</template>
<script setup>
import { navigateTo } from 'nuxt/app'
function openInNewTab() {
navigateTo('https://www.example.com', { external: true, open: true })
}
</script>external 속성에 더해서 open 속성을 true로 설정하면 새 탭에서 페이지가 열리도록 할 수 있습니다.
주의할점
navigateTo()를 호출할 때 항상 await 또는 return을 사용해야 합니다. navigateTo는 비동기 방식으로 동작하기 때문입니다.
