Nuxt的錯誤頁面和個性meta設置

當用戶輸入路由錯誤的時候，我們需要給他一個明確的指引，所以說在 應用程序開發中404頁面時必不可少的。Nuxt.js支持直接再默認佈局文件夾裏建立錯誤頁面。

建立錯誤頁面
在根目錄下的layouts文件夾下建立一個error.vue文件，它相當於一個顯示應用錯誤的組件。

<template>
    <div>
        <h2 v-if="error.statusCode == 404">404 - 頁面不存在</h2>
        <h2 v-else>500 - 服務器錯誤</h2>
        <ul>
            <li><nuxt-link to="/">HOME</nuxt-link></li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['error'],
}
</script>

代碼用v-if進行判斷錯誤類型，需要注意的是這個錯誤時你需要在<script>裏進行聲明的。

個性meta設置
頁面的Meta對於SEO的設置非常重要，比如你現在要做個新聞頁面，那爲了搜索搜索引擎對新聞的收錄，需要每個頁面對新聞都有不同的title和meta設置。直接使用head方法來設置當前頁面的頭部信息就可以了。我們現在要把New-1這個頁面設置成個性的meta和title。

1.我們先把pages/news/index.vue頁面的鏈接進行修改一下，傳入一個title，目的是爲了在新聞具體頁面進行接收title，形成文章的標題。

/pages/news/index.vue

<template>
    <div>
        <h2>News Index page</h2>
        <p>NewID:{{$route.params.newsId}}</p>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
            <li><nuxt-link :to="{name:'news-id',params:{id:123,title:'我是新聞標題'}}">News-1</nuxt-link></li>
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

第一步完成後，我們修改/pages/news/_id.vue，讓它根據傳遞值變成獨特的meta和title標籤。

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>
<script>
export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//獨立設置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
}
</script>

注意：爲了避免組件中的meta標籤不能正確覆蓋父組件中相同的標籤而產生重複的現象，建議利用hid鍵爲meta標籤配一個唯一的標識編號。