jsschools

useRoute()

Returns the current reactive route object (params, query, path, meta).

Since Nuxt 3.0 Spec ↗

Syntax

const route = useRoute()

Returns

RouteLocationNormalized — Reactive route with path, params, query, hash, name, meta.

Examples

<script setup lang="ts">
const route = useRoute()
const { data } = await useFetch(`/api/posts/${route.params.id}`)
</script>

<script setup lang="ts">
const route = useRoute()
// React to query changes
watch(() => route.query.page, (page) => {
  console.log('page is now', page)
})
</script>

Notes

Must be called in setup, a plugin, or a route middleware. The object is reactive, so reference `route.params.id` inside computed/watch rather than destructuring (destructuring loses reactivity). To change the route use `useRouter()` or `navigateTo()`.

See also