2022-10-06 09:15:30 +00:00
---
title: "useRoute"
description: The useRoute composable returns the current route.
2023-10-18 10:59:43 +00:00
links:
- label: Source
icon: i-simple-icons-github
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/router.ts
size: xs
2022-10-06 09:15:30 +00:00
---
2023-10-18 10:59:43 +00:00
::callout
2022-05-06 11:06:33 +00:00
Within the template of a Vue component, you can access the route using `$route` .
2023-10-18 10:59:43 +00:00
::
2022-05-06 11:06:33 +00:00
## Example
2023-07-07 16:24:09 +00:00
In the following example, we call an API via [`useFetch` ](/docs/api/composables/use-fetch ) using a dynamic page parameter - `slug` - as part of the URL.
2022-05-06 11:06:33 +00:00
2023-08-03 11:05:29 +00:00
```html [~/pages/[slug\\].vue]
2023-07-18 10:31:45 +00:00
< script setup lang = "ts" >
2022-05-06 11:06:33 +00:00
const route = useRoute()
2023-10-18 10:59:43 +00:00
const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`)
2022-05-06 11:06:33 +00:00
< / 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` .
2023-10-18 10:59:43 +00:00
## API
2022-05-06 11:06:33 +00:00
Apart from dynamic parameters and query parameters, `useRoute()` also provides the following computed references related to the current route:
2023-10-18 10:59:43 +00:00
- `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
2022-05-06 11:06:33 +00:00
2024-01-01 10:28:23 +00:00
::callout
Browsers don't send [URL fragments ](https://url.spec.whatwg.org/#concept-url-fragment ) (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.
::
2023-10-18 10:59:43 +00:00
:read-more{icon="i-simple-icons-vuedotjs" to="https://router.vuejs.org/api/interfaces/RouteLocationNormalizedLoaded.html"}