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标签配一个唯一的标识编号。