From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Sun, 4 Feb 2024 09:58:08 +0000 (+0000)
Subject: docs: omitting parent components for nested routes (#2127)
X-Git-Tag: v4.3.0~14
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4d3cbf58295055ce045efda13db6a1afd144d172;p=thirdparty%2Fvuejs%2Frouter.git

docs: omitting parent components for nested routes (#2127)

* docs: omitting parent components for nested routes

* Update packages/docs/guide/essentials/nested-routes.md

---------

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
---

diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index a024db94..4fd5c4eb 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -15,7 +15,7 @@ const i18nLabels = {
 }
 
 const theme: Theme = {
-  ...DefaultTheme,
+  extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
       // 'home-features-after': () => h(HomeSponsors),
diff --git a/packages/docs/guide/essentials/nested-routes.md b/packages/docs/guide/essentials/nested-routes.md
index 6a8ec20f..c4824133 100644
--- a/packages/docs/guide/essentials/nested-routes.md
+++ b/packages/docs/guide/essentials/nested-routes.md
@@ -128,3 +128,24 @@ const routes = [
   },
 ]
 ```
+
+## Omitting parent components <Badge text="4.1+" />
+
+We can also take advantage of the parent-child relationship between routes without needing to nest route components. This can be useful for grouping together routes with a common path prefix, or when working with [route meta fields](../advanced/meta).
+
+To achieve this, we omit the `component` and `components` options from the parent route:
+
+```js
+const routes = [
+  {
+    path: '/admin',
+    children: [
+      { path: '', component: AdminOverview },
+      { path: 'users', component: AdminUserList },
+      { path: 'users/:id', component: AdminUserDetails },
+    ], 
+  },
+]
+```
+
+As the parent doesn't specify a route component, the top-level `<router-view>` will skip over the parent and just use the component from the relevant child instead.