const router = useRouter()

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

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

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

기본 조작

• addRoute(): 라우터 인스턴스에 새로운 경로를 추가합니다. parentName을 제공하여 기존 경로의 자식으로 새로운 경로를 추가할 수 있습니다.
• removeRoute(): 이름으로 기존 경로를 제거합니다.
• getRoutes(): 모든 경로 기록의 전체 목록을 가져옵니다.
• hasRoute(): 주어진 이름의 경로가 존재하는지 확인합니다.
• 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' })

히스토리 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 composable은 afterEach, beforeEach 및 beforeResolve 헬퍼 메서드를 제공하여 네비게이션 가드로 작동합니다.

그러나 Nuxt는 네비게이션 가드 구현을 단순화하고 더 나은 개발자 경험을 제공하는 라우트 미들웨어 개념을 가지고 있습니다.

Promise 및 오류 처리

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

범용 라우터 인스턴스

pages/ 폴더가 없는 경우, useRouter는 유사한 헬퍼 메서드를 가진 범용 라우터 인스턴스를 반환하지만, 모든 기능이 지원되거나 vue-router와 동일하게 동작하지 않을 수 있음을 유의하세요.