mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
chore(examples): update scroll-behavior example (#4398)
#2738 [skip release]
This commit is contained in:
parent
52a92fbc48
commit
9f274364ce
3
examples/scroll-behavior/layouts/default2.vue
Normal file
3
examples/scroll-behavior/layouts/default2.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<nuxt />
|
||||
</template>
|
@ -1,3 +1,4 @@
|
||||
export default {
|
||||
css: ['~/assets/main.css']
|
||||
css: ['~/assets/main.css'],
|
||||
modules: ['@nuxtjs/axios']
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "example-scroll-behavior",
|
||||
"dependencies": {
|
||||
"axios": "^0.15.3",
|
||||
"@nuxtjs/axios": "^5.3.6",
|
||||
"nuxt-edge": "latest",
|
||||
"vue-router": "https://github.com/homerjam/vue-router#dist"
|
||||
},
|
||||
|
14
examples/scroll-behavior/pages/another-long.vue
Normal file
14
examples/scroll-behavior/pages/another-long.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Another long page</h1>
|
||||
<div class="spacer" style="width: 100%; height: 3000px; background: darkgreen" />
|
||||
<nuxt-link to="/">Home page</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
layout: 'default2',
|
||||
scrollToTop: true
|
||||
}
|
||||
</script>
|
@ -22,5 +22,6 @@
|
||||
</NuxtLink>
|
||||
</p>
|
||||
<div class="spacer" style="width: 100%; height: 3000px; background: grey" />
|
||||
<p><nuxt-link to="/another-long">Another long page</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -28,7 +28,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
|
||||
@ -40,9 +39,9 @@ export default {
|
||||
if (!from) return 'slide-left'
|
||||
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
|
||||
},
|
||||
async asyncData({ query }) {
|
||||
async asyncData({ query, $axios }) {
|
||||
const page = +query.page || 1
|
||||
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
|
||||
const data = await $axios.$get(`https://reqres.in/api/users?page=${page}`)
|
||||
return {
|
||||
page: +data.page,
|
||||
totalPages: data.total_pages,
|
||||
|
Loading…
Reference in New Issue
Block a user