NUXT异步服务器渲染方式

[colinox]

NUXT异步服务器渲染方式

只能添加在路由主文件中(组件和样式文件无法使用)

import axios from 'axios'

export default {
    // 返回内容为context上下文对象
    asyncData({ req, params }) {
        return axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
            return { posts: res.data}
        })
    }
}

上下文对象

context 变量的可用属性一览：

属性字段	类型	可用	描述
isClient	Boolean	客户端 & 服务端	是否来自客户端渲染（废弃。请使用 process.client）。
isServer	Boolean	客户端 & 服务端	是否来自服务端渲染（废弃。请使用 process.server）。
isDev	Boolean	客户端 & 服务端	是否是开发(dev) 模式，在生产环境的数据缓存中用到
route	vue-router 路由	客户端 & 服务端	vue-router 路由实例。
store	vuex 数据流	客户端 & 服务端	Vuex.Store 实例。只有vuex 数据流存在相关配置时可用。
env	Object	客户端 & 服务端	nuxt.config.js 中配置的环境变量, 见 环境变量 api
params	Object	客户端 & 服务端	route.params 的别名
query	Object	客户端 & 服务端	route.query 的别名
req	http.Request	服务端	Node.js API 的 Request 对象。如果 nuxt 以中间件形式使用的话，这个对象就根据你所使用的框架而定。nuxt generate 不可用。
res	http.Response	服务端	Node.js API 的 Response 对象。如果 nuxt 以中间件形式使用的话，这个对象就根据你所使用的框架而定。nuxt generate 不可用。
redirect	Function	客户端 & 服务端	用这个方法重定向用户请求到另一个路由。状态码在服务端被使用，默认 302。redirect([status,] path [, query])
error	Function	客户端 & 服务端	用这个方法展示错误页：error(params)。params 参数应该包含 statusCode 和 message 字段。