Nuxt之错误页面和个性化meta标签

最新推荐文章于 2025-06-25 09:07:37 发布

weixin_33853827

最新推荐文章于 2025-06-25 09:07:37 发布

阅读量864

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c0496e251882548e937f976

本文介绍如何在Nuxt.js中自定义错误页面及如何为特定页面设置个性化meta标签，实现SEO优化。通过创建自定义的错误页面和利用head钩子，可以提升用户体验并改善搜索引擎排名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 错误页面

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>复制代码