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>里进行声明的，如果不声明程序是找不到error.statusCode的。
这里我也用了一个<nuxt-link>的简单写法直接跟上路径就可以了。
个性meta设置
页面的Meta对于SEO的设置非常重要，比如你现在要作个新闻页面，那为了搜索引擎对新闻的收录，需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。
1.我们先把pages/news/index.vue页面的链接进行修改一下，传入一个title，目的是为了在新闻具体页面进行接收title，形成文章的标题。
/pages/news/index.vue
<li><nuxt-link :to="{name:‘news-id‘,params:{id:123,title:‘jspang.com‘}}">News-1</nuxt-link></li>2.第一步完成后，我们修改/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>nuxt.js1-7
原文地址：https://www.cnblogs.com/xiaofandegeng/p/9073978.html