From 818d9da861ab03b4e3a8c568f3b21d3e3fff3e01 Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sun, 4 Feb 2024 07:17:04 +0000 Subject: [PATCH 1/2] docs: omitting parent components for nested routes --- packages/docs/.vitepress/theme/index.ts | 2 +- .../docs/guide/essentials/nested-routes.md | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts index a024db948..4fd5c4eb0 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 6a8ec20f4..a651151e4 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 + +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. From 076d82e8289144e7454299a21fe4a8e40ee07652 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Sun, 4 Feb 2024 10:57:49 +0100 Subject: [PATCH 2/2] Update packages/docs/guide/essentials/nested-routes.md --- packages/docs/guide/essentials/nested-routes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/guide/essentials/nested-routes.md b/packages/docs/guide/essentials/nested-routes.md index a651151e4..c48241332 100644 --- a/packages/docs/guide/essentials/nested-routes.md +++ b/packages/docs/guide/essentials/nested-routes.md @@ -148,4 +148,4 @@ const routes = [ ] ``` -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. +As the parent doesn't specify a route component, the top-level `` will skip over the parent and just use the component from the relevant child instead.