useRouter

useRouter 컴포저블은 라우터 인스턴스를 반환한다.

<!--
pages/index.vue
-->

<script setup>
const router = useRouter()
</script>

템플릿 내에 라우터 인스턴스만 필요한 경우 $router 을 사용하세요.

<!--
pages/index.vue
-->

<template>
  <button @click="$router.back()">Back</button>
</template>

pages/ 디렉토리가 있는 경우 useRouter는 에서 vue-router 제공하는 것과 동작이 동일합니다.

 

기본기능

  • addRoute() : 라우터 인스턴스에 새 경로를 추가합니다. parentName 기존 경로의 하위 경로로 새 경로를 추가하도록 제공될 수 있다.
  • removeRoute() : 이름으로 기존 경로를 제거한다.
  • getRoutes() : 모든 경로 기록의 전체 목록을 가져온다.
  • hasRoutes() : 해당 이름의 경로가 존재하는지 확인한다.
  • resolve() : 경로 위치의 정규화된 버전을 반환한다. 기존 기반을 포함하는 href 속성도 포함된다.
const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })
router.addRoute() 는 경로 배열에 경로 세부 정보를 추가하고 동시에 새로운 router.push() 시 페이지 탐색을 즉시 트리거한다. Vue 컴포넌트 및 컴포저블에서 유용하다.

 

히스토리 API 기반

  • back(): 가능하면 기록으로 돌아갑니다. router.go(-1).와 같다.
  • forward(): 가능하면 기록에서 앞으로 이동합니다. router.go(1).와 같다.
  • go(): router.back()  router.forward()에서 적용된 계층적 제한 없이 기록을 통해 앞으로 또는 뒤로 이동한다.
  • push(): 기록 스택에 항목을 푸시하여 프로그래밍 방식으로 새 URL로 이동합니다. navigateTo 대신 사용하는 것이 좋다.
  • replace(): 경로 기록 스택의 현재 항목을 대체하여 프로그래밍 방식으로 새 URL로 이동합니다. navigateTo 대신 사용하는 것이 좋다.
const router = useRouter()

router.back()
router.forward()
router.go(3)
router.push({ path: "/home" })
router.replace({ hash: "#bio" })

 

useRouter 컴포저블은 탐색 가드 역할을 하는 afterEach, beforeEach  beforeResolve 헬퍼 메서를 제공한다.

 

그러나 Nuxt 에는 탐색 가드 구현을 단순화하고 더 나은 개발자 경험을 제공하는 경로 미들웨어 개념이 있다.

참고) Docs > Guide > Directory Structure > Middleware

 

Promise 와 오류 처리

  • isReady(): 라우터가 초기 탐색을 완료하면 해결되는 Promise를 반환한다.
  • onError: 탐색 중에 포착되지 않은 오류가 발생할 때마다 호출되는 오류 핸들러를 추가한다.

 

범용 라우터 인스턴스

pages/ 폴더가 없는 경우 useRouter 는 헬퍼 메서드를 사용하여 범용 라우터 인스턴스를 반환하지만 모든 기능이 그렇지는 않다. vue-router 와 정확히 동일한 방식으로 지원되거나 작동할 수 있다.

'Nuxt 공식문서 번역 > Composables' 카테고리의 다른 글

useSeoMeta  (0) 2023.12.15
useRuntimeConfig  (0) 2023.12.15
useRoute  (0) 2023.12.14
useRequestURL  (0) 2023.12.14
useRequestHeader  (0) 2023.12.14
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유