navigateTo

navigateTo는 프로그래밍 방식으로 사용자를 탐색하는 헬퍼 함수다. 서버 측과 클라이언트 측 모두에서 사용할 수 있다.

 

사용법

Vue 컴포넌트 내에서

<script setup lang="ts">
// passing 'to' as a string
await navigateTo('/search')

// ... or as a route object
await navigateTo({ path: '/search' })

// ... or as a route object with query parameters
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})
</script>

 

라우트 미들웨어 내에서

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // setting the redirect code to '301 Moved Permanently'
    return navigateTo('/search', { redirectCode: 301 })
  }
})

참고) Nuxt-Directory > middleware

 

외부 URL

<script setup lang="ts">
// will throw an error;
// navigating to an external URL is not allowed by default
await navigateTo('https://nuxt.com')

// will redirect successfully with the 'external' parameter set to 'true'
await navigateTo('https://nuxt.com', {
  external: true
})
</script>

 

open() 사용

<script setup lang="ts">
// will open 'https://nuxt.com' in a new tab
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
}

navigateTo 호출 시 결과에 대해 항상 await 또는 return 을 사용해야 한다.

 

매겨변수

• to : to은 일반 문자열이거나 리디렉션할 경로 개체일 수 있다.  undefined 또는 null로 전달되면 기본값은 '/' 이다.
  • type : RouteLocationRaw | undefined | null
  • default : '/'
• options(선택 사항) : 다음 하위 객체를 포함한다
  • type : NavigateToOptions
    
    • replace (선택 사항) : navigateTo 는 클라이언트의 Vue 라우터 인스턴스에 지정된 경로를 푸시한다. true 로 설정하여 해당 경로가 교체되야 함을 나타낸다.
      • type : boolean
      • default : false
  • redirectCode (선택 사항) : navigateTo는 서버 측에서 리디렉션이 발생할 때 지정된 경로로 리디렉션하고 기본적으로 리디렉션 코드를 302 로 지정한다. 다른 redirectCode 을 제공하여 동작을 수정할 수 있다. 통상 301 Moved Permanently 를 영구적 리디렉션에 사용한다.
    
    • type : number
    • default : 302 
  • external (선택 사항) : true 로 설정하면 외부 URL로의 이동을 허용한다. 그렇지 않으면 기본적으로 외부 탐색이 허용되지 않으므로 오류가 발생한다.
    
    • type : boolean
    • default : false 
  • open (선택 사항) : window.open() 메서드를 사용하여 URL로 이동할 수 있다. 이 옵션은 클라이언트 측에만 적용 가능하며 서버 측에서는 무시된다.
    
    • type : OpenOptions (다음 속성을 허용하는 개체)
      • target : 공백이 없는 문자열 , 리소스가 로드되는 탐색 컨텍스트의 이름을 지정한다.
        
        • type : string
        • default : '_blank'
      • windowFeatures (선택 사항)
        
        • type: OpenWindowFeatures (다음 속성을 허용하는 개체)
          • popup (선택 사항)
            • type : boolean
          • width 또는 innerWidth (선택 사항)
            • type : number
          • height 또는 innerHeight (선택 사항)
            • type : number
          • left 또는 screenX (선택 사항)
            • type : number
          • top 또는 screenY (선택 사항)
            • type : number
          • noopener (선택 사항)
            • type : boolean
          • noreferrer (선택 사항)
            • type : boolean