From 2852ec4a2fc4b944e5d16a5d28d7781fd6de875f Mon Sep 17 00:00:00 2001
From: Krutie Patel <krutie.patel@gmail.com>
Date: Fri, 6 May 2022 21:06:33 +1000
Subject: [PATCH] docs(api): composable use route (#4776)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
---
 docs/content/3.api/1.composables/use-route.md | 40 +++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

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]
+<script setup>
+const route = useRoute()
+const { data: mountain } = await useFetch(`https://api.nuxtjs.dev/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`.
+
+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
-::