useRoute
$route
.The useRoute
composable is a wrapper around the identically named composable from vue-router
, providing access to the current route in a Nuxt application.
The key difference is that in Nuxt, the composable ensures that the route is updated only after the page content has changed after navigation.
In contrast, the vue-router
version updates the route immediately, which can lead to synchronization issues between different parts of the template
that rely on the route metadata, for example.
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 hashhash
: decoded hash section of the URL that starts with a #query
: access route query parametersmatched
: array of normalized matched routes with current route locationmeta
: custom data attached to the recordname
: unique name for the route recordpath
: encoded pathname section of the URLredirectedFrom
: route location that was attempted to access before ending up on the current route location
Common Pitfalls
Route Synchronization Issues
It’s important to use the useRoute()
composable from Nuxt rather than the one from vue-router
to avoid synchronization issues during page navigation.
Importing useRoute
directly from vue-router
bypasses Nuxt's implementation.
// ❌ do not use `useRoute` from `vue-router`
import { useRoute } from 'vue-router'
// ✅ use Nuxt's `useRoute` composable
import { useRoute } from '#app'
useRoute
in Middleware Calling
Using useRoute
in middleware is not recommended because it can lead to unexpected behavior.
There is no concept of a "current route" in middleware.
The useRoute()
composable should only be used in the setup function of a Vue component or in a Nuxt plugin.
useRoute()
internally too.route.fullPath
Hydration Issues with
Browsers don't send URL fragments (for example #foo
) when making requests. So using route.fullPath
to affect the template can trigger hydration issues because this will include the fragment on client but not the server.