Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-25 23:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve single root element note about comments (#4245)

Browse Source 
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Matteo Rigoni 2022-04-11 17:59:13 +02:00 committed by GitHub
parent 180afc854f
commit d6210606bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/content/2.guide/3.directory-structure/10.pages.md
View File

@ -57,8 +57,38 @@ If you are using [app.vue](/guide/directory-structure/app), make sure to use the
</template>
```
::alert{type=warning}
Note that pages **must have a single root element** to allow route transitions between pages.
Pages **must have a single root element** to allow route transitions between pages. (HTML comments are considered elements as well.)
This means that when the route is server rendered, or statically generated, you will be able to see its contents correctly, but when you navigate towards that route during client side navigation the transition between routes will fail and you'll see that the route will not be rendered.
Here are some examples to illustrate what a page with a single root element looks like:
::code-group
```vue [pages/working.vue]
<template>
<div>
<!-- This page correctly has only one single root element -->
Page content
</div>
</template>
```
```vue [pages/bad-1.vue]
<template>
<!-- This page will not render when route changes during client side navigation, because of this comment -->
<div>Page content</div>
</template>
```
```vue [pages/bad-2.vue]
<template>
<div>This page</div>
<div>Has more than one root element</div>
<div>And will not render when route changes during client side navigation</div>
</template>
```
::
## Dynamic Routes