diff --git a/docs/content/3.api/1.composables/use-route.md b/docs/content/3.api/1.composables/use-route.md index 5d0df13bc1..d1e47d20f7 100644 --- a/docs/content/3.api/1.composables/use-route.md +++ b/docs/content/3.api/1.composables/use-route.md @@ -1,7 +1,41 @@ # `useRoute` +The `useRoute` composable returns the current route and must be called in a `setup` function, plugin, or route middleware. + +Within the template of a Vue component, you can access the route using `$route`. + +## Example + +In the following example, we call an API via `useAsyncData` using a dynamic page parameter - `slug` - as part of the URL. + +```html [~/pages/[slug].vue] + + + +``` + +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`. + +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 + +::ReadMore{link="https://router.vuejs.org/api/#routelocationnormalized"} +:: + ::ReadMore{link="/guide/features/routing"} :: - -::NeedContribution -::