Nuxt之錯誤頁面和個性化meta標籤

一. 錯誤頁面

nuxt爲咱們提供默認的錯誤頁面，可是經常不去用它，若是想使用本身的錯誤頁面，只須要在默認佈局文件夾下建立error.vue便可：

/layouts/error.vue:

<template>
  <div>
    <h2 v-if="error">404頁面，客戶端錯誤</h2>
    <h2 v-else>404頁面，服務器錯誤</h2>
  </div>
</template>
<script>
  export default {
    props: ['error']
  }
</script>複製代碼

代碼用v-if進行判斷錯誤類型，須要注意的是這個錯誤是你須要在<script>裏進行聲明的，若是不聲明程序是找不到error.statusCode的。

二. 個性化meta標籤

全局的meta標籤是在nuxt.config.js的head中設置，有些時候咱們須要對單個頁面設置本身的meta標籤，如：門戶網站的新聞詳情頁

在打開 "news-1" 詳情頁的時候，咱們傳入了title字段。

/pages/news/index.vue：

<template>
  <div>
    <h2>News Index Page</h2>
    <P>NewsId: {{$route.params.newsId}}</P>
    <ul>
      <li>
        <nuxt-link :to="'/'">HOME</nuxt-link>
      </li>
      <li>
        <nuxt-link :to="{name: 'news-id',params: {id: 123,title: 'I am news'}}">
          news-1之新聞列表展現
        </nuxt-link>
      </li>
      <li>
        <nuxt-link :to="'/news/k'">news-2之錯誤頁面展現</nuxt-link>
      </li>
    </ul>
  </div>
</template>複製代碼

在 "news-1" 詳情頁，咱們接收title字段。

/pages/news/_id.vue：

<template>
  <div>
    <h2>News-Content</h2>
    <p>NewsId: {{$route.params.id}}</p>
    <ul>
      <li>
        <nuxt-link :to="{name:'index'}">HOME</nuxt-link>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    validate({params}) {
      return /^\d*$/.test(params.id)
    },
    data() {
      return {
        title: this.$route.params.title  //接收title字段
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {hid: 'description',name: 'news1',content: 'this is news1'}
        ]
      }
    }
  }
</script>複製代碼

在head鉤子中設置當前詳情頁的seo

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

本文引用於技術胖nuxt教程，感謝胖哥