Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

docs: add `keepalive` docs (#3090)

This commit is contained in:
Daniel Roe 2022-02-07 10:17:28 +00:00 committed by GitHub
parent 8fbdab8151
commit b91150d67c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -199,6 +199,10 @@ definePageMeta({
Of course, you are welcome to define metadata for your own use throughout your app. But some metadata defined with `definePageMeta` has a particular purpose: Of course, you are welcome to define metadata for your own use throughout your app. But some metadata defined with `definePageMeta` has a particular purpose:
#### `keepalive`
Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route which has dynamic child routes, if you want to preserve page state across route changes. You can also set props to be passed to `<KeepAlive>`.
#### `key` #### `key`
[See above](#child-route-keys). [See above](#child-route-keys).

6
packages/nuxt3/src/pages/runtime/composables.ts
View File

@ -12,10 +12,10 @@ export const useRoute = () => {
export interface PageMeta { export interface PageMeta {
[key: string]: any [key: string]: any
pageTransition?: false | TransitionProps pageTransition?: boolean | TransitionProps
layoutTransition?: false | TransitionProps layoutTransition?: boolean | TransitionProps
key?: string | ((route: RouteLocationNormalizedLoaded) => string) key?: string | ((route: RouteLocationNormalizedLoaded) => string)
keepalive?: false | KeepAliveProps keepalive?: boolean | KeepAliveProps
} }
declare module 'vue-router' { declare module 'vue-router' {