예제

다음 예제에서는 동적 페이지 매개변수 - slug - 를 URL의 일부로 사용하여 useFetch를 통해 API를 호출합니다.

<script setup lang="ts">
const route = useRoute()
const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`)
</script>

<template>
  <div>
    <h1>{{ mountain.title }}</h1>
    <p>{{ mountain.description }}</p>
  </div>
</template>

경로 쿼리 매개변수(예: /test?example=true 경로의 example)에 접근해야 하는 경우, useRoute().params 대신 useRoute().query를 사용할 수 있습니다.

API

동적 매개변수와 쿼리 매개변수 외에도, useRoute()는 현재 경로와 관련된 다음의 계산된 참조를 제공합니다:

• fullPath: 경로, 쿼리 및 해시를 포함하는 현재 경로와 관련된 인코딩된 URL
• hash: #으로 시작하는 URL의 디코딩된 해시 섹션
• query: 경로 쿼리 매개변수에 접근
• matched: 현재 경로 위치와 일치하는 정규화된 경로 배열
• meta: 레코드에 첨부된 사용자 정의 데이터
• name: 경로 레코드의 고유한 이름
• path: URL의 인코딩된 경로명 섹션
• redirectedFrom: 현재 경로 위치에 도달하기 전에 접근하려고 했던 경로 위치