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教程，感谢胖哥