DAY4 起手式--Nuxt.js(细)说pages(上)

你知道 pages 的 vue 元件多了什麽功能吗？

经过昨天的介绍，我们都知道 pages 是拿来放各页面的 vue 元件，也知道 router 会依照 pages 目录结构来生成配置，除了这些之外，到底跟平常的 vue 元件有什麽不一样？
今天就让我们一起来研究，pages 元件增加的那些方法／属性们吧！

asyncData 方法

我们平常在 vue 元件中使用的是 data 属性，看到 data 绝对就是放资料的地方，没有错啦！
那 syncData 跟我们的 data 有什麽关系呢？
** asyncData 方法使得你能够在渲染组件之前异步获取数据。**

data() {
    return { text: '被覆盖的资料' } 
},
asyncData() {
    return { text: '新资料' } 
}

以上面的例子来说，虽然一开始我们有 data 资料，可资料会在渲染出来之前，就被 asyncData 取回来的资料覆盖罗！
** asyncData 方法会在元件每次加载之前被调用**，这样有什麽好处呢？我们用两种范例示范差别

1. 打开一个空网页(浏览器满头问号不知道这网页做啥的)→呼叫 API 取资料到 data → data 更新到画面
2. asyncData 呼叫 API 取得资料到 data 当预设值→渲染网页(浏览器看的到预设值的资料)

这样大家应该感受的到差别了(?)
简单来说就是 空网页 / 有预设值资料的网页 的差别
若是要深入了解，可以搜寻关键字 ** SPA / SSR **
小妹能力有限，菜比八只能先简单粗略说明，在此抱歉阿！

fetch 方法

fetch 方法跟楼上的 asyncData 方法有87%相像，一样是在网页渲染之前调用，差别在 fetch 方法填充的是状态树（store）数据，若有使用 Vuex 就会用到罗!

head 方法

这里说的 head 就是 HTML 的那个 head 没有错啦！
在我们 Nuxt.js 里面，除了拥有全域 head 设定之外，更可以客制化每一个页面专属的 head 设定喔！

• 全域 head 设定
  首先请打开 nuxt.config.js 档案
  将我们需要的 meta 设定一一填入即可啦！有没有简单？

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

那你可能会想问，如果要使用外部的 CSS 或 JS 怎麽办呢？
别担心，一样简单，全域使用就通通丢到 nuxt.config.js 没有错啦！
像是常用的 google 字体或是 jQuery 如下范例使用即可。

module.exports = {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto'
      }
    ]
  }
}

• 个别 head 设定
  资料结构都跟楼上全域的一样，只是放置的位置更动而已，把资料放到元件档案内即可唷！

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello World!'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    }
  }
</script>

像这样就可以客制化每一个页面的 head 了，是不是很容易呢？

结语

恭喜各位，今天我们一起研究了 pages 元件中的几个方法，都非常的实用。
明天我们接着把剩下的属性跟方法研究完毕，让我们在使用此工具可以更加便利唷！