nuxt.js页面布局和异步请求数据

开门见山

本篇文章主要是介绍nuxt.js页面布局和异步请求数据，希望可以帮助到大家

页面布局

其实就是在项目的根目录下，新建一个layout目录，里面的文件可以作为项目的模板文件
在组件内有一个选项可以作为引用的模板，举例如下
layouts 文件夹,新建default.vue内容如下
<template>
  <div class="">
    <h2>Layouts / default.vue组件</h2>
    <!-- 页面出口相当于子路由 -->
    <nuxt />
  </div>
</template>

<script>
export default {
  name: "layoutsDefault",
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {},
  mounted() {},
};
</script>

<style lang='scss' scoped>
//@import url()
</style>
这样的的话所有的页面文件都会加载默认的模板
如果想在组件内使用其他模板的话，组件内部版有一个选项layout:"" 
填入layouts文件夹内部的,模板名称即可

异步请求数据

如何或许异步渲染服务端页面主要使用asyncData()函数

nuxt.js扩展Vue.js，增加了一个叫做asyncData的方法，使得我们可以在设置组件的数据之前

能异步获取或处理数据

基本用法:

1、它会将asyncData返回的数据融合组件data方法返回数据一并给组件使用，也就是可以 通过 return {data} ，data组件中使用

2、调用时机:服务端渲染期间和客户端路由更新之前

注意事项

1、只能在页面组件中使用，也就是pages文件夹下的vue文件中使用,非页面组件无法调用asyncData方法

2、没有this，因为它是组件初始化之前被调用的

如果想要动态页面内容有利于SEO，或者是提升首屏渲染速度的时候，就在asyncData中发起请求

如果是非异步数据或者普通数据，则正常初始化data中即可

异步数据上下文对象

我在这里描述一个情况，动态路由携带参数，页面通过参数发起请求但是，无法通过this.$route.params拿到参数，
那么问题来了，该怎么操作数据呢，这里就通过异步数据上下文对象，来解决这个问题具体代码演示如下，

//这里嵌套的子路由，在这里要发起请求
  async asyncData (context) {
    console.log(context)//打印上下文对象
    const { data } = await axios({
      method: 'GET',
      url: 'http://localhost:3000/data.json'//本地的模拟数据
    })
    const id = Number.parseInt(context.params.id)
    return {
      article: data.posts.find(item => item.id === id)
    }
  }

<!--页面展示 -->
<template>
  <div>
    <h1>{{ article.title }}</h1>
    <div>{{ article.body }}</div>
  </div>
</template>

谢谢观看，如有不足，敬请指教