useRoute · Nuxt Composables

В шаблоне компонента Vue вы можете получить доступ к маршруту с помощью $route.

Пример

В следующем примере мы вызываем API через useFetch, используя динамический параметр страницы - slug - как часть URL.

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

Если вам нужно получить доступ к параметрам запроса маршрута (например, example в пути /test?example=true), то вы можете использовать useRoute().query вместо useRoute().params.

API

Помимо динамических параметров и query-параметров, useRoute() также предоставляет следующие вычисляемые ссылки, связанные с текущим маршрутом:

fullPath: кодированный URL, связанный с текущим маршрутом, который содержит путь, запрос и хэш
hash: декодированная хэш-секция URL, начинающаяся с #
query: access route query parameters
matched: массив нормализованных маршрутов, совпадающих с текущим местоположением маршрута
meta: пользовательские данные, прикрепленные к записи
name: уникальное имя для записи маршрута
path: закодированная часть с именем пути в URL
redirectedFrom: местоположение маршрута, к которому пытались получить доступ, прежде чем попасть в текущее местоположение маршрута

Браузеры не отправляют фрагменты URL (например, #foo) при выполнении запросов. Поэтому использование route.fullPath в вашем шаблоне может вызвать проблемы с гидрацией, так как это будет включать фрагмент на клиенте, но не на сервере.

Узнать больше https://router.vuejs.org/api/#RouteLocationNormalizedLoaded.

useResponseHeader

Use useResponseHeader to set a server response header.

useRouteAnnouncer

Этот композабл отслеживает изменения заголовка страницы и соответствующим образом обновляет сообщение объявителя.