<aside> 💡 navigateTo 함수는 프로그래밍 방식으로 페이지를 탐색하는 헬퍼 함수입니다.

</aside>

<aside> 💡 navigateTo 함수는 서버 측(server side)과 클라이언트 측(client side) 모두에서 사용할 수 있습니다.

</aside>

사용방법

Vue 컴포넌트 내에서

<script setup lang="ts">
// 'to'를 문자열로 전달
await navigateTo('/search')

// ... 또는 라우트(route) 객체로
await navigateTo({ path: '/search' })

// ... 또는 쿼리 매개변수가 있는 라우트(route) 객체로
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})
</script>

Route Middleware 내에서

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
		// 리디렉션 코드를 '301 Moved Permanently'으로 설정
    return navigateTo('/search', { redirectCode: 301 })
  }
})

외부 URL

<script setup lang="ts">
// 오류가 발생합니다.
// 외부 URL로의 이동은 기본적으로 허용되지 않습니다.
await navigateTo('<https://nuxt.com>')

// 'external' 매개변수를 'true'로 설정하면 성공적으로 리디렉션됩니다.
await navigateTo('<https://nuxt.com>', {
  external: true
})
</script>

open 속성 사용

<script setup lang="ts">
// 새 탭에서 '<https://nuxt.com>'이 열립니다.
await navigateTo('<https://nuxt.com>', {  
  open: {
    target: '_blank',
    windowFeatures: {
      width: 500,
      height: 500
    }
  }
})
</script>

Type

navigateTo(to: RouteLocationRaw | undefined | null, options?: **NavigateToOptions**) => Promise<void | NavigationFailure> | RouteLocationRaw

interface NavigateToOptions {
  replace?: boolean
  redirectCode?: number
  external?: boolean
  open?: OpenOptions
}

<aside> ⚠️ navigateTo()를 호출할 때 항상 await 또는 return 을 사용해야 합니다. 이유는: Nuxt 3에서는 navigateTo()를 호출할 때 항상 await 또는 return을 사용해야 합니다. 이는 비동기적인 동작으로 인해 해당 함수의 실행이 완료될 때까지 기다려야 하기 때문입니다. 만약 이를 사용하지 않으면 다음 코드가 navigateTo()의 완료를 기다리지 않고 실행되어 예상치 못한 동작이 발생할 수 있습니다. 결국 코드의 안정성을 보장하기 위해서입니다.

</aside>

파라미터

to

Type: RouteLocationRow | undefined | null

Default: ‘/’