asyncData()方法
-
基本用方法:
-
它会将asyncData返回的数据融合组件data方法返回数据一并给组件
-
调用时机:服务端渲染期间和客户端路由更新之前
-
-
注意事项:
-
asyncData()只能在页面组件上使用
-
没有this,因为它是在组件初始化之前被调用的
-
代码案例
<template>
<div>
<h1>{{ title }}</h1>
<nuxt-link to='/about'> about</nuxt-link>
<!-- 非页面组件中的调用 -->
<foo :posts="posts"></foo>
</div>
</template>
<script>
import axios from 'axios'
import Foo from "@/components/foo"
export default {
name:"index",
components:{
Foo
},
// 当你想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候,就在asyncData中请求数据
async asyncData(){
const res=await axios({
method:"GET",
url:'http://localhost:3000/data.json'
})
// console.log(res)
return res.data
},
// 如果是非异步数据或者普通数据,则正常的初始化到data中调用
data(){
return{
foo:"bar"
}
}
}
</script>