mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs: improve single root element note about comments (#4245)
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
parent
180afc854f
commit
d6210606bf
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user