渲染首页分类内容

前面我们已经把数据获取回来了，接下来，我们应该渲染一下，其实就是让我们的Html页面显示出来

我们应该在哪个声明周期方法去拉取数据呢？

可以去官网了解一下

nuxt.js官网

asyncData 方法

asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用

这是官方原话

从上面的图我们也可以知道，这个方法调用以后，才是render(绘制，渲染)

所以，我们可以在这个方法上去拉取数据。

asyncData() {
      console.log("test load data....");
      return api.getRecommendCategories().then(result => {
        if (result.code === 10000) {
          return {categories: result.data};
        } else {
          //TODO:处理错误
        }
      });
    }

数据回来以后，怎么处理呢？

数据渲染

<template>
  <section class="container">
    <div class="center-box">
      <div class="recommend-category-box">
        <ul class="clear-fix">
          <li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
              :key="index">
            {{item.favorites_title}}
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

或者这样写

<template>
  <section class="container">
    <div class="center-box">
      <div class="recommend-category-box">
        <ul class="clear-fix">
          <li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
              :key="index" v-text="item.favorites_title">
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

全部部代码

<template>
  <section class="container">
    <div class="center-box">
      <div class="recommend-category-box">
        <ul class="clear-fix">
          <li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
              :key="index" v-text="item.favorites_title">
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
  import AppLogo from '~/components/AppLogo.vue'
  import api from '../utils/api';

  export default {
    components: {
      AppLogo
    },
    asyncData() {
      console.log("test load data....");
      return api.getRecommendCategories().then(result => {
        if (result.code === 10000) {
          return {categories: result.data};
        } else {
          //TODO:处理错误
        }
      });
    }
  }
</script>

<style>

  .recommend-menu-active {
    border-bottom: #c9302c 2px solid;
    color: #c9302c !important;
  }

  .recommend-category-box li {
    font-size: 16px;
    cursor: pointer;
    margin-left: 20px;
    color: #8c8c8c;
    margin-right: 20px;
  }

  .recommend-category-box {
    height: 60px;
    margin-top: 30px;
    margin-bottom: 30px;
    background: #fff;
    line-height: 58px;
    box-shadow: 0 5px 10px #d4d4d4;
  }

  .recommend-category-box ul {
    list-style: none;
  }
</style>

运行结果

到这里我就把首页菜单内容渲染完成了。

你可以右键查看一下源码，页面里会有相关的数据，如此一来，则有利于于搜索引擎收录。