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

docs: update examples of dynamic pageKey (#22920)

Browse Source
This commit is contained in:
Daniel Roe 2023-08-31 11:27:23 +01:00 committed by GitHub
parent 2d46971162
commit 559a72370b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/2.guide/2.directory-structure/1.pages.md
View File

@ -205,7 +205,7 @@ If you want more control over when the `<NuxtPage>` component is re-rendered (fo
<template> <template>
<div> <div>
<h1>I am the parent view</h1> <h1>I am the parent view</h1>
<NuxtPage :page-key="someKey" /> <NuxtPage :page-key="route => route.fullPath" />
</div> </div>
</template> </template>
``` ```

6
docs/3.api/2.components/2.nuxt-page.md
View File

@ -34,6 +34,12 @@ For example, passing `static` key, `NuxtPage` component is rendered only once wh
<NuxtPage page-key="static" /> <NuxtPage page-key="static" />
``` ```
You can also use a dynamic key based on the current route. (Don't use `$route` object here as it can cause problems with how `<NuxtPage>` renders pages with `<Suspense>`.)
```html
<NuxtPage :page-key="route => route.fullPath" />
```
Alternatively, `pageKey` can be passed as a `key` value via `definePageMeta` from the `<script>` section of your Vue component in the `/pages` directory. Alternatively, `pageKey` can be passed as a `key` value via `definePageMeta` from the `<script>` section of your Vue component in the `/pages` directory.
```js ```js