55K

useRoute

Исходники
Композабл useRoute возвращает текущий маршрут.
В шаблоне компонента 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

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