- zh.nuxtjs.org/api/
- 你可能想要在伺服器端獲取並渲染資料。Nuxt.js新增了asyncData方法使得你能夠在渲染元件之前非同步獲取資料。
1.型別
Function
2.官方解釋
- asyncData方法會在元件(限於頁面元件)每次載入之前被呼叫。它可以在服務端或路由更新之前被呼叫。在這個方法被呼叫的時候,第一個引數被設定為當前頁面的上下文物件,你可以利用 asyncData方法來獲取資料並返回給當前元件。
- asyncData只在服務端執行
3.demo
<template>
<section class="container">
<h1>{{ message }}</h1>
</section>
</template>
<script>
export default {
data() {
return { message: "data" };
},
//常用context
asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
return { message: "asyncData" };
}
};
</script>
<script>
// 常用context
let context = {
route: {
name: 'index',
meta: [{}],
path: '/',
hash: '',
query: { a: '1' },
params: {},
fullPath: '/?a=1',
matched: [[Object]]
},
isDev: true,
store,
env: {},
req: {},
res: {},
params: {},
query: {},
redirect: [Function],
error: [Function]
}
</script>
複製程式碼