mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 13:45:18 +00:00
parent
bbeb6b50f5
commit
694e95b2b4
@ -37,3 +37,64 @@ Given the example above, you can access group/id within your component via the `
|
||||
{{ $route.params.id }}
|
||||
</template>
|
||||
```
|
||||
|
||||
## Nested Routes
|
||||
|
||||
We provide a semantic alias for `RouterView`, the `NuxtChild` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html).
|
||||
|
||||
### Example
|
||||
|
||||
```bash
|
||||
-| pages/
|
||||
---| parent/
|
||||
------| child.vue
|
||||
---| parent.vue
|
||||
```
|
||||
|
||||
To display the `child.vue` component, simply put the `<NuxtChild>` component inside the `parent.vue` component:
|
||||
|
||||
```html{}[pages/parent/child.vue]
|
||||
<template>
|
||||
<div>
|
||||
<h3>child.vue</h3>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
```html{}[pages/parent.vue]
|
||||
<template>
|
||||
<div>
|
||||
<h1>parent.vue</h1>
|
||||
<NuxtChild />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- output -->
|
||||
<template>
|
||||
<div>
|
||||
<h1>parent.vue</h1>
|
||||
<div>
|
||||
<h3>child.vue</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
The example file tree above should generate these routes:
|
||||
|
||||
```ts
|
||||
[
|
||||
{
|
||||
path: '/parent',
|
||||
component: '~/pages/parent.vue',
|
||||
name: 'parent',
|
||||
children: [
|
||||
{
|
||||
path: 'child',
|
||||
component: '~/pages/parent/child.vue',
|
||||
name: 'parent-child'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
@ -6501,10 +6501,10 @@ jiti@^1.10.1, jiti@^1.11.0, jiti@^1.12.5, jiti@^1.12.6, jiti@^1.9.1, jiti@^1.9.2
|
||||
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.6.tgz#8884d53a10bd571e0e85787994d97cfcc48ac6f9"
|
||||
integrity sha512-drQ/qnYriF9KiU47sRF0rTvfQmJo4JEmFMhCk2SJIsUj+hGnQaxkwaKfyvK9KenX20JNTQmVfJOz7VWe0cSntw==
|
||||
|
||||
jiti@^1.12.7:
|
||||
version "1.12.7"
|
||||
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.7.tgz#745074d5a6f88c29152b32a99f4a2de23bd22a3f"
|
||||
integrity sha512-2v5iYsJp5l7iX6ettW/hD7A9qZtsib3gMBfxbQxASszzOpZ0dFZBZAUQGKKIQ780XGR3sGEp1L/8t1JyyPq5Fg==
|
||||
jiti@^1.12.9:
|
||||
version "1.12.9"
|
||||
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.9.tgz#2ce45b265cfc8dc91ebd70a5204807cf915291bc"
|
||||
integrity sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
|
||||
|
||||
joycon@^3.0.1:
|
||||
version "3.0.1"
|
||||
@ -6578,7 +6578,7 @@ json5@^1.0.1:
|
||||
dependencies:
|
||||
minimist "^1.2.0"
|
||||
|
||||
json5@^2.1.1, json5@^2.1.2, json5@^2.2.0:
|
||||
json5@^2.1.1, json5@^2.1.2:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
|
||||
integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
|
||||
@ -7345,12 +7345,10 @@ mlly@^0.2.5:
|
||||
dependencies:
|
||||
import-meta-resolve "^1.1.1"
|
||||
|
||||
mlly@^0.2.6:
|
||||
version "0.2.6"
|
||||
resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.2.6.tgz#6becb976c726ad9b4432662b7f8eb3e8d74b449c"
|
||||
integrity sha512-Wzv+ONQTQLsEZ6/Hyp7yc+EpOv52DrPGN497S3ZN66OuYdJkwo9BoVTM+kefNfGRzTKu2qmW4vLp5CbX9HfoYQ==
|
||||
dependencies:
|
||||
import-meta-resolve "^1.1.1"
|
||||
mlly@^0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.3.0.tgz#5705b2a95551d79ad33feedc046daf7c6d079748"
|
||||
integrity sha512-6XphOVPsnIzuqNYlcZPMJhaMDDdrEgbLUlA7BPis8O0kkLPbOVA8GcXGeICGcnDotCtTkxAEWBT+FlhywrXTmg==
|
||||
|
||||
move-concurrently@^1.0.1:
|
||||
version "1.0.1"
|
||||
@ -8172,12 +8170,12 @@ pkg-dir@^3.0.0:
|
||||
dependencies:
|
||||
find-up "^3.0.0"
|
||||
|
||||
pkg-types@^0.1.3:
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.1.5.tgz#8e1740454561cebcb1037b728148f6d7b9442f28"
|
||||
integrity sha512-EyZ8oKXlLv6YhW/6dbU25ei2MVr8yRd6NPh5CLH+vtTHUMKsKwYfpu02BszZYXGSn+LGc9dCVYWmc37vDWuJQQ==
|
||||
pkg-types@^0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.2.1.tgz#41a22a6689c1fb3df5434856cf158598342701b8"
|
||||
integrity sha512-RlrGelHSS2yPeLT9NMuMIfpKS7+gRAhuXi+PexBeToKjbRkmu+E+HdgDY2ZKU1RDirk5w9WuViEhOufELtAnug==
|
||||
dependencies:
|
||||
json5 "^2.2.0"
|
||||
jsonc-parser "^3.0.0"
|
||||
|
||||
plausible-tracker@^0.3.1:
|
||||
version "0.3.1"
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
Other
|
||||
Other layout
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
Parent
|
||||
<RouterView />
|
||||
<NuxtChild />
|
||||
</div>
|
||||
</template>
|
||||
|
11
packages/nuxt3/src/pages/runtime/child.vue
Normal file
11
packages/nuxt3/src/pages/runtime/child.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<RouterView v-slot="{ Component }">
|
||||
<component :is="Component" :key="$route.path" />
|
||||
</RouterView>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NuxtChild'
|
||||
}
|
||||
</script>
|
@ -1,5 +1,5 @@
|
||||
import { defineComponent, h } from 'vue'
|
||||
|
||||
// @ts-ignore
|
||||
import layouts from '#build/layouts'
|
||||
|
||||
export default defineComponent({
|
||||
|
@ -5,7 +5,7 @@ import {
|
||||
createMemoryHistory,
|
||||
RouterLink
|
||||
} from 'vue-router'
|
||||
// @ts-ignore
|
||||
import NuxtChild from './child.vue'
|
||||
import NuxtPage from './page.vue'
|
||||
import NuxtLayout from './layout'
|
||||
import { defineNuxtPlugin } from '#app'
|
||||
@ -13,6 +13,7 @@ import { defineNuxtPlugin } from '#app'
|
||||
import routes from '#build/routes'
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.component('NuxtChild', NuxtChild)
|
||||
nuxtApp.vueApp.component('NuxtPage', NuxtPage)
|
||||
nuxtApp.vueApp.component('NuxtLayout', NuxtLayout)
|
||||
nuxtApp.vueApp.component('NuxtLink', RouterLink)
|
||||
|
Loading…
Reference in New Issue
Block a user