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 |