Nuxt.js 中如何以编程方式重定向到错误页面

在Nuxt.js项目开发中，当遇到接口请求失败、用户无权限访问、参数校验不通过等异常场景时，我们往往需要主动跳转到错误页面，而不是在业务页面内零散展示错误信息。Nuxt.js内置了错误页面处理机制，我们可以通过编程方式快速触发错误页面展示。

核心方法：使用error方法

Nuxt.js在上下文对象中提供了error方法，这是编程式触发错误页面的核心API。该方法接收一个配置对象作为参数，配置对象中常用的属性有statusCode和message，分别用来指定错误状态码和错误提示信息。

在页面组件中使用

在页面的asyncData、fetch或者生命周期钩子中，都可以通过this.$nuxt.error调用该方法，如果是使用组合式API，则可以通过useNuxtApp获取上下文后调用。

以下是选项式API的使用示例：

export default {
  async asyncData({ $axios, error }) {
    try {
      // 请求接口数据
      const res = await $axios.get('/api/user/info')
      return {
        userInfo: res.data
      }
    } catch (err) {
      // 请求失败时触发错误页面
      error({
        statusCode: err.response?.status || 500,
        message: err.response?.data?.msg || '服务器内部错误'
      })
    }
  }
}

如果是组合式API，使用方式如下：

import { useNuxtApp } from '#app'

export default defineComponent({
  setup() {
    const { error } = useNuxtApp()
    const fetchData = async () => {
      try {
        const res = await fetch('/api/article/detail')
        if (!res.ok) {
          throw new Error('请求失败')
        }
        const data = await res.json()
        return data
      } catch (err) {
        // 触发错误页面
        error({
          statusCode: 404,
          message: '文章不存在或已被删除'
        })
      }
    }
    return {}
  }
})

在插件或中间件中使用

在Nuxt.js的插件或者路由中间件中，也可以直接通过上下文的error方法触发错误页面，比如权限校验中间件：

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  const token = useCookie('token').value
  if (!token) {
    // 无token时跳转到错误页面
    const nuxtApp = useNuxtApp()
    nuxtApp.error({
      statusCode: 401,
      message: '请先登录后再访问该页面'
    })
    // 中断后续路由跳转
    return abortNavigation()
  }
})

错误页面的自定义配置

默认的Nuxt.js错误页面样式比较简单，我们可以在项目的layouts目录下创建error.vue文件来自定义错误页面内容，该文件会自动接收error对象作为props。

<template>
  <div class="error-page">
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="handleBack">返回首页</button>
  </div>
</template>

<script>
export default {
  props: ['error'],
  methods: {
    handleBack() {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.error-page {
  text-align: center;
  padding: 50px 20px;
}
h1 {
  font-size: 48px;
  color: #f56c6c;
}
p {
  font-size: 18px;
  margin: 20px 0;
}
button {
  padding: 10px 20px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

注意事项

• 调用error方法后，当前的页面逻辑会中断，直接跳转到错误页面，不会再执行后续的代码。
• statusCode建议使用标准的HTTP状态码，比如401代表未授权、404代表资源不存在、500代表服务器错误，这样更符合HTTP规范。
• 如果是在服务端渲染的asyncData中调用error方法，错误页面会在服务端直接渲染，有利于SEO。
• 不要在错误页面组件中再次调用error方法，否则会导致无限循环跳转。

需要注意的是，error方法触发的错误页面和this.$router.push跳转的页面不同，前者是Nuxt.js内置的错误展示机制，会自动携带错误信息，不需要手动传递参数。

Nuxt.js编程式重定向错误页面error_method路由跳转修改时间：2026-07-14 03:30:24