From: Schlömi <a.schloemi@gmail.com>
Date: Wed, 3 Aug 2022 09:57:01 +0000 (+0200)
Subject: docs(nested-routes): add note for named routes (#1496)
X-Git-Tag: v4.1.4~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=619358b4843586afba6454a4a0187be11251ee2c;p=thirdparty%2Fvuejs%2Frouter.git

docs(nested-routes): add note for named routes (#1496)

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>
---

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 }],
+  },
+]
+```