Nuxt.js学习(七) --- Nuxt.js错误页面、个性化特定页面的 Meta 标签

[TOC]

1、错误页面

1.1、官方文档：

你可以通过编辑 layouts/error.vue 文件来定制化错误页面.

警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page).

这个布局文件不需要包含 <nuxt/> 标签。你可以把这个布局文件当成是显示应用错误（404，500等）的组件。

举一个个性化错误页面的例子 layouts/error.vue:

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // 你可以为错误页面指定自定义的布局
}
</script>

1.2、实际操作(实例练习)

1.2.1、建立错误页面

layouts/error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'layout' // 你可以为错误页面指定自定义的布局
}
</script>

用v-if进行判断错误类型，这个error需要在script里进行声明，如果不声明程序找不到error.statusCode

1.3、测试

2、Meta标签

2.1、官方文档：

默认 Meta 标签

Nuxt.js 允许你在 nuxt.config.js 里定义应用所需的所有默认 meta 标签，在 head 字段里配置就可以了：

注意: Nuxt.js 使用 hid 而不是默认值 vmid 识别元素key

一个使用自定义 viewport 和 谷歌字体 的配置示例：

head: {
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
  ]
}

个性化特定页面的 Meta 标签

注意: 为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号

页面的Meta对于SEO的设置非常重要，比如你现在要作个新闻页面，那为了搜索引擎对新闻的收录，需要每个页面对新闻都有不同的title和meta设置。直接使用head方法来设置当前页面的头部信息就可以了。我们现在要把New-1这个页面设置成个性的meta和title。

2.2、实际操作(练习实例)

2.2.1、修改/pages/news/index.vue

<template>
  <div>
    <h2>News Index page(嵌套子组件中的默认页面)</h2>
    <p>id:{{$route.params.Id}}</p>
    <ul>
      <li>
        <nuxt-link to="/">Home</nuxt-link>
        <nuxt-link to="{name:'news-id',params:{id:123,title:'sqks'}}">id1</nuxt-link>
        <nuxt-link to="/news/aaa">id2</nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

2.2.2、修改/pages/news/_id.vue，根据传递值改变meta和title

<template>
  <div>
    <h2>ids:[{{$route.params.id}}]</h2>
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  validate({ params }) {
    return /^\d+$/.test(params.id);
  },
   data(){
    return{
      title:this.$route.params.title,
    }
  },
//独立设置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'tingqianyunluo'}
        ]
      }
    }
};
</script>

<style>
</style>

2.3、测试