useRouter

<script setup lang="ts">
const router = useRouter()
</script>

템플릿 내에서만 라우터 인스턴스가 필요하다면 $router를 사용하세요:

<template>
  <button @click="$router.back()">뒤로가기</button>
</template>

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

기본 조작

• addRoute(): 라우터 인스턴스에 새로운 라우트를 추가합니다. parentName을 제공하면 기존 라우트의 자식으로 새 라우트를 추가할 수 있습니다.
• removeRoute(): 이름으로 기존 라우트를 제거합니다.
• getRoutes(): 모든 라우트 레코드의 전체 목록을 가져옵니다.
• hasRoute(): 주어진 이름의 라우트가 존재하는지 확인합니다.
• resolve(): 라우트 위치의 정규화된 버전을 반환합니다. 또한 기존 base가 포함된 href 속성도 포함합니다.

const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })

History 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에는 네비게이션 가드 구현을 단순화하고 더 나은 개발자 경험을 제공하는 라우트 미들웨어 개념이 있습니다.

Promise 및 에러 처리

• isReady(): 라우터가 초기 네비게이션을 완료하면 resolve되는 Promise를 반환합니다.
• onError: 네비게이션 중에 처리되지 않은 에러가 발생할 때마다 호출되는 에러 핸들러를 추가합니다.

유니버설 라우터 인스턴스

pages/ 폴더가 없다면, useRouter는 유사한 헬퍼 메서드를 가진 유니버설 라우터 인스턴스를 반환하지만, 모든 기능이 지원되거나 vue-router와 정확히 동일하게 동작하지 않을 수 있습니다.