useRoute
The useRoute composable returns the current route.
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.
~/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>
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 #matched: 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
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.