NuxtJs入门 异步请求数据

官网
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

import axios from 'axios'
export default {
  // asyncData第一次会在服务端调用 后面才由客户端调用 asyncData必须要return返回一个对象
  asyncData () {
    return axios({
      url: 'api地址',
    }).then(res => {
      return {
        list: res.data
      }
    })
  }
}

或者

import axios from 'axios'
export default {
  async asyncData ({ params }) {
    const { data } = await axios.get(`api接口`)
    return { list: res.data }
  }
}

然后用获取的list数据渲染到页面上

	<nuxt-link
      v-for="nav in list"
      :key="nav.filmId"
      :to="`/active/${nav.filmId}`"
    >
      <img :src="nav.poster" :alt="nav.category">
      <p>{{ nav.name}}</p>
    </nuxt-link>

查看网页源代码

数据成功的渲染到页面上且可以被爬虫数据捕获

end