Ejemplo

En el siguiente ejemplo, llamamos a una API a través de useFetch usando un parámetro de página dinámico - slug - como parte de la URL.

<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>

Si necesitas acceder a los parámetros de consulta de la ruta (por ejemplo, example en la ruta /test?example=true), entonces puedes usar useRoute().query en lugar de useRoute().params.

API

Además de los parámetros dinámicos y los parámetros de consulta, useRoute() también proporciona las siguientes referencias computadas relacionadas con la ruta actual:

• fullPath: URL codificada asociada con la ruta actual que contiene path, query y hash
• hash: sección de hash decodificada de la URL que comienza con un #
• query: acceso a los parámetros de consulta de la ruta
• matched: array de rutas coincidentes normalizadas con la ubicación de la ruta actual
• meta: datos personalizados adjuntos al registro
• name: nombre único para el registro de la ruta
• path: sección de pathname codificada de la URL
• redirectedFrom: ubicación de la ruta que se intentó acceder antes de terminar en la ubicación de la ruta actual