useRoute

useRoute 컴포저블은 현재 경로를 반환한다.

Vue 컴포넌트의 템플릿 내에서 $route 를 사용하여 경로에 액세스할 수 있다.

 

사용 예

<!--
~/pages/[slug].vue
-->

<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의 디코딩된 해시 섹션
• matched: 현재 경로 위치와 일치하는 정규화된 경로 배열
• meta: 레코드에 첨부된 사용자 정의 데이터
• name: 경로 레코드의 고유 이름
• path: URL의 인코딩된 경로 이름 섹션
• redirectedFrom: 현재 경로 위치에 도달하기 전에 접근을 시도한 경로 위치