From 619358b4843586afba6454a4a0187be11251ee2c Mon Sep 17 00:00:00 2001 From: =?utf8?q?Schl=C3=B6mi?= Date: Wed, 3 Aug 2022 11:57:01 +0200 Subject: [PATCH] docs(nested-routes): add note for named routes (#1496) Co-authored-by: Eduardo San Martin Morote --- .../docs/guide/essentials/nested-routes.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/docs/guide/essentials/nested-routes.md b/packages/docs/guide/essentials/nested-routes.md index 7730e29d..6bd747d7 100644 --- a/packages/docs/guide/essentials/nested-routes.md +++ b/packages/docs/guide/essentials/nested-routes.md @@ -98,3 +98,33 @@ const routes = [ ``` A working demo of this example can be found [here](https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=%2Fusers%2Feduardo). + +## Nested Named Routes + +When dealing with [Named Routes](./named-routes.md), you usually **name the children routes**: + +```js +const routes = [ + { + path: '/user/:id', + component: User, + // notice how only the child route has a name + children: [{ path: '', name: 'user', component: UserHome }], + }, +] +``` + +This will ensure navigating to `/user/:id` will always display the nested route. + +In some scenarios, you may want to navigate to a named route without navigating to the nested route. For example, if you want to navigate to `/user/:id` without displaying the nested route. In that case, you can **also** name the parent route but note **that reloading the page will always display the nested child** as it's considered a navigation to the path `/users/:id` instead of the named route: + +```js +const routes = [ + { + path: '/user/:id', + name: 'user-parent' + component: User, + children: [{ path: '', name: 'user', component: UserHome }], + }, +] +``` -- 2.47.3