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..c48241332 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 `` will skip over the parent and just use the component from the relevant child instead.