Nuxt的错误页面和个性meta设置
当用户输入路由错误的时候,我们需要给他一个明确的指引,所以说在 应用程序开发中404页面时必不可少的。Nuxt.js支持直接再默认布局文件夹里建立错误页面。建立错误页面在根目录下的layouts文件夹下建立一个error.vue文件,它相当于一个显示应用错误的组件。<template><div>&
当用户输入路由错误的时候,我们需要给他一个明确的指引,所以说在 应用程序开发中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标签配一个唯一的标识编号。
更多推荐
所有评论(0)