Nuxt/docs/3.api/2.composables/use-route.md

title	description	links
useRoute	The useRoute composable returns the current route.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/router.ts xs

::note Within the template of a Vue component, you can access the route using $route. ::

Example

In the following example, we call an API via useFetch using a dynamic page parameter - slug - as part of the 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>

If you need to access the route query parameters (for example example in the path /test?example=true), then you can use useRoute().query instead of useRoute().params.

API

Apart from dynamic parameters and query parameters, useRoute() also provides the following computed references related to the current route:

• fullPath: encoded URL associated with the current route that contains path, query and hash
• hash: decoded hash section of the URL that starts with a #
• matched: array of normalized matched routes with current route location
• meta: custom data attached to the record
• name: unique name for the route record
• path: encoded pathname section of the URL
• redirectedFrom: route location that was attempted to access before ending up on the current route location

::note Browsers don't send URL fragments (for example #foo) when making requests. So using route.fullPath in your template can trigger hydration issues because this will include the fragment on client but not the server. ::

:read-more{icon="i-simple-icons-vuedotjs" to="https://router.vuejs.org/api/interfaces/RouteLocationNormalizedLoaded.html"}