mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
example: Add keep-alive example
This commit is contained in:
parent
cb1a4e9336
commit
4e5959d293
11
examples/with-keep-alive/README.md
Normal file
11
examples/with-keep-alive/README.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
# <keep-alive> with Nuxt.js
|
||||||
|
|
||||||
|
Introduced in v1.2.0, you can add the `keep-alive` prop to `<nuxt/>` or `<nuxt-child/>` to "keep alive" the pages.
|
||||||
|
|
||||||
|
`layouts/default.vue`:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<nuxt keep-alive/>
|
||||||
|
</template>
|
||||||
|
```
|
3
examples/with-keep-alive/layouts/default.vue
Normal file
3
examples/with-keep-alive/layouts/default.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<nuxt keep-alive/>
|
||||||
|
</template>
|
11
examples/with-keep-alive/package.json
Normal file
11
examples/with-keep-alive/package.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"name": "hello-nuxt-keep-alive",
|
||||||
|
"dependencies": {
|
||||||
|
"nuxt": "latest"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "nuxt",
|
||||||
|
"build": "nuxt build",
|
||||||
|
"start": "nuxt start"
|
||||||
|
}
|
||||||
|
}
|
19
examples/with-keep-alive/pages/about.vue
Executable file
19
examples/with-keep-alive/pages/about.vue
Executable file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>Hi from {{ name }}</p>
|
||||||
|
<nuxt-link to="/">Home page</nuxt-link>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
asyncData() {
|
||||||
|
return {
|
||||||
|
name: process.static ? 'static' : (process.server ? 'server' : 'client')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
head: {
|
||||||
|
title: 'About page'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
14
examples/with-keep-alive/pages/index.vue
Executable file
14
examples/with-keep-alive/pages/index.vue
Executable file
@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Welcome!</h1>
|
||||||
|
<nuxt-link to="/about">About page</nuxt-link>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
head: {
|
||||||
|
title: 'Home page'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in New Issue
Block a user