Nuxt的错误页面和个性meta设置

在应用程序开发中,Nuxt.js支持在默认布局文件夹建立404错误页面,可在根目录layouts文件夹下创建error.vue文件。同时,页面的Meta对SEO设置很重要,可通过head方法设置头部信息,修改页面链接传递title,让具体页面形成独特meta和title,还可用hid键为meta标签配唯一编号。

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

当用户输入路由错误的时候,我们需要给他一个明确的指引,所以说在 应用程序开发中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标签配一个唯一的标识编号。
这里写图片描述

### 在 Nuxt.js 中为路由配置 Meta 字段 为了在 Nuxt.js 项目中向路由添加元信息 (meta),可以通过修改 `nuxt.config.js` 文件中的路由配置来实现。Nuxt.js 支持通过扩展 Vue Router 功能来自定义路由设置。 #### 修改 nuxt.config.js 配置文件 可以在 `nuxt.config.js` 中直接定义带有 meta 属性的路由对象: ```javascript export default { router: { routes: [ { path: '/', component: '~/pages/index.vue', meta: { requiresAuth: true, title: 'Home Page' } }, { path: '/about', component: '~/pages/about.vue', meta: { requiresAuth: false, title: 'About Us' } } ] } } ``` 上述代码展示了如何手动声明带 meta 数据的路由规则[^3]。 然而,在大多数情况下,更推荐的方式是在页面组件内部定义这些属性,因为这使得维护更加方便,并且保持了单文件组件的一致性简洁性。 #### 使用页面组件内联方式 对于每一个具体的页面文件(如 `/pages/index.vue`, `/pages/about.vue`),可以直接在其 `<script>` 或者 `<script setup>` 标签里加入 `definePageMeta()` 函数调用来设定特定于该页的 meta 信息: ```vue <script> // 对应 /pages/some-page.vue export default { layout: 'default', // 可选参数用于指定布局模板 asyncData(context) {}, mounted() {} } definePageMeta({ requiresAuth: true, title: 'Some Special Page' }) </script> <template> <!-- 页面 HTML 结构 --> </template> ``` 这种方式不仅限定了当前页面的行为逻辑,还能够清晰地表达出哪些额外的数据应该关联到这个页面上[^4]。 当使用动态路径时(例如基于 ID 的 URL 参数),同样可以按照相同的方法操作对应的 `_id.vue` 组件文件。 #### 访问 Meta 信息 一旦设置meta 字段之后,就可以在整个应用的不同地方访问它们。比如在一个全局中间件里面判断某个页面是否需要认证: ```javascript export default function ({ route }) { const pageRequiresAuth = route.meta.requiresAuth; if (pageRequiresAuth && !isUserAuthenticated()) { redirect('/login'); } } ``` 这里假设存在一个名为 `requiresAuth` 的布尔型 meta 键值对,以及相应的用户状态检查函数 `isUserAuthenticated()` 重定向功能 `redirect()`。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值