From c2ea767d4e18a6a9b62e8814d1b4b66eadb6dc5a Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Mon, 2 May 2022 23:54:58 +1000 Subject: [PATCH 01/13] docs: update useRoute composable page --- docs/content/3.api/1.composables/use-route.md | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/docs/content/3.api/1.composables/use-route.md b/docs/content/3.api/1.composables/use-route.md index 5d0df13bc14..b1afbe6b872 100644 --- a/docs/content/3.api/1.composables/use-route.md +++ b/docs/content/3.api/1.composables/use-route.md @@ -5,3 +5,55 @@ ::NeedContribution :: +# `useRoute` + +`useRoute` composable returns the location of current route and must be called inside of `setup()` function. + +In Nuxt, `useRoute` is availble to use inside: + +- Nuxt pages +- layouts, +- components, +- composables, +- route middleware and +- Nuxt plugins. + +`useRoute` composable is accessed in `setup()` function using `useRoute()`, and directly inside the template of Vue component using `$route`. + +We can expose possible dynamic parameters of the route via `useRoute` composable. 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 API endpoint requires query parameters to construct URL, then you can use `route.query` instead of `route.params`. + +Apart from dynamic parameters and query parameters, `useRoute` also provides the following computed references related to the current route: + +- fullPath - Encoded URL associated to the route location. Contains path, query and hash +- hash - Decoded hash section of the URL. Always starts with a #. Empty string if there is no hash in the URL +- matched - array of normalized route records that were matched with the given route location +- meta - custom data attached to the record +- name - unique name for the route record +- path - encoded pathname section of the URL associated to the route location +- redirectedFrom - route location we were initially trying to access before ending up on the current route location + +::ReadMore{link="https://router.vuejs.org/api/#routelocationnormalized"} +:: + +::ReadMore{link="/guide/features/routing"} +:: + +::NeedContribution +:: From 936ff3805d0d490faca849af0262a8caa95ee932 Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Tue, 3 May 2022 00:05:27 +1000 Subject: [PATCH 02/13] docs: update computed ref details of useRoute --- docs/content/3.api/1.composables/use-route.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/content/3.api/1.composables/use-route.md b/docs/content/3.api/1.composables/use-route.md index b1afbe6b872..7fa9033f0d9 100644 --- a/docs/content/3.api/1.composables/use-route.md +++ b/docs/content/3.api/1.composables/use-route.md @@ -41,13 +41,13 @@ If API endpoint requires query parameters to construct URL, then you can use `ro Apart from dynamic parameters and query parameters, `useRoute` also provides the following computed references related to the current route: -- fullPath - Encoded URL associated to the route location. Contains path, query and hash -- hash - Decoded hash section of the URL. Always starts with a #. Empty string if there is no hash in the URL -- matched - array of normalized route records that were matched with the given route location -- meta - custom data attached to the record -- name - unique name for the route record -- path - encoded pathname section of the URL associated to the route location -- redirectedFrom - route location we were initially trying to access before ending up on the current route location +* **fullPath**: encoded URL associated to 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"} :: From c60130341c8058c7f3ab7fcc29b33679b92ef1ee Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Tue, 3 May 2022 23:28:57 +1000 Subject: [PATCH 03/13] docs: remove Guide related details --- docs/content/3.api/1.composables/use-route.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/docs/content/3.api/1.composables/use-route.md b/docs/content/3.api/1.composables/use-route.md index 7fa9033f0d9..fcc80b107a9 100644 --- a/docs/content/3.api/1.composables/use-route.md +++ b/docs/content/3.api/1.composables/use-route.md @@ -7,16 +7,7 @@ :: # `useRoute` -`useRoute` composable returns the location of current route and must be called inside of `setup()` function. - -In Nuxt, `useRoute` is availble to use inside: - -- Nuxt pages -- layouts, -- components, -- composables, -- route middleware and -- Nuxt plugins. +`useRoute` composable returns the location of current route and must be called inside `setup()` function. `useRoute` composable is accessed in `setup()` function using `useRoute()`, and directly inside the template of Vue component using `$route`. From 944903f2d543b1c386ceeb3b2aaf88f9519b12b6 Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Tue, 3 May 2022 23:32:38 +1000 Subject: [PATCH 04/13] docs: remove boilerplate text --- docs/content/3.api/1.composables/use-route.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/docs/content/3.api/1.composables/use-route.md b/docs/content/3.api/1.composables/use-route.md index fcc80b107a9..557fdcf5158 100644 --- a/docs/content/3.api/1.composables/use-route.md +++ b/docs/content/3.api/1.composables/use-route.md @@ -1,12 +1,5 @@ # `useRoute` -::ReadMore{link="/guide/features/routing"} -:: - -::NeedContribution -:: -# `useRoute` - `useRoute` composable returns the location of current route and must be called inside `setup()` function. `useRoute` composable is accessed in `setup()` function using `useRoute()`, and directly inside the template of Vue component using `$route`. @@ -45,6 +38,3 @@ Apart from dynamic parameters and query parameters, `useRoute` also provides the ::ReadMore{link="/guide/features/routing"} :: - -::NeedContribution -:: From e5019ca36f66a0f0e11296af49ed00e42209f8e4 Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Tue, 3 May 2022 23:53:01 +1000 Subject: [PATCH 05/13] docs: add title for example section --- docs/content/3.api/1.composables/use-route.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/content/3.api/1.composables/use-route.md b/docs/content/3.api/1.composables/use-route.md index 557fdcf5158..ce22304fdd7 100644 --- a/docs/content/3.api/1.composables/use-route.md +++ b/docs/content/3.api/1.composables/use-route.md @@ -4,8 +4,11 @@ `useRoute` composable is accessed in `setup()` function using `useRoute()`, and directly inside the template of Vue component using `$route`. -We can expose possible dynamic parameters of the route via `useRoute` composable. In the following example, we call an API via `useAsyncData` using a dynamic page parameter - `slug` - as part of the URL. +We can expose possible dynamic parameters of the route via `useRoute` composable. +## 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]