docs: update examples of dynamic pageKey (#22920)

nuxt · Aug 31, 2023 · 559a723 · 559a723
1 parent 2d46971
commit 559a723
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/docs/2.guide/2.directory-structure/1.pages.md b/docs/2.guide/2.directory-structure/1.pages.md
@@ -205,7 +205,7 @@ If you want more control over when the `<NuxtPage>` component is re-rendered (fo
 <template>
   <div>
     <h1>I am the parent view</h1>
-    <NuxtPage :page-key="someKey" />
+    <NuxtPage :page-key="route => route.fullPath" />
   </div>
 </template>
 ```

diff --git a/docs/3.api/2.components/2.nuxt-page.md b/docs/3.api/2.components/2.nuxt-page.md
@@ -34,6 +34,12 @@ For example, passing `static` key, `NuxtPage` component is rendered only once wh
 <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.
 
 ```js