如何通过Vue Router向Nuxt错误页面传递props参数

问题根源 #

Nuxt 2的/layouts/error.vue是框架内置的特殊错误布局，不属于用户手动注册的普通路由，直接通过router.push传递params/props不会被框架识别注入，所以拿不到参数。官方提供了标准的错误传递方法，无需手动操作路由。 #

具体实现步骤 #

1. 传递错误信息 #

分两种场景调用官方API传递错误对象：

客户端场景（组件、插件、普通方法内）

直接调用Nuxt全局内置的$nuxt.error()方法，所有你需要传递的字段都可以放在入参对象里：

// 举axios拦截器的示例
axios.interceptors.response.use(
  res => res,
  error => {
    $nuxt.error({
      statusCode: error.response?.status ?? 500,
      message: error.response?.data?.message ?? '请求异常',
      // 自定义字段，你要的响应数据可以放这里
      responseData: error.response?.data
    })
    return Promise.reject(error)
  }
)

服务端场景（asyncData、fetch、服务端插件内）

直接调用上下文自带的error方法：

// 举asyncData内的示例
async asyncData({ $axios, error }) {
  try {
    const res = await $axios.get('/api/xxx')
    return { list: res.data }
  } catch (err) {
    error({
      statusCode: err.response?.status ?? 500,
      message: err.response?.data?.message ?? '服务端请求异常',
      responseData: err.response?.data
    })
  }
}

2. 错误页接收参数 #

Nuxt会自动将你传递的错误对象注入到错误布局的error prop中，直接声明props接收即可，你用Composition API的写法如下：

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';
export default defineComponent({
  // 声明error prop，Nuxt会自动注入值
  props: {
    error: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    // 直接取props.error就能拿到所有你传递的字段
    console.log('错误状态码：', props.error.statusCode)
    console.log('错误信息：', props.error.message)
    console.log('自定义返回数据：', props.error.responseData)

    return {}
  }
})
</script>

如果需要从上下文中取，也可以用useContext：

import { defineComponent, useContext } from '@nuxtjs/composition-api';
export default defineComponent({
  setup() {
    const { error } = useContext()
    console.log('上下文取的错误对象：', error.value)
    return {}
  }
})

注意事项 #

• 无需手动配置错误路由的props属性，也不需要手动调用router.push跳转到错误页，调用error方法后Nuxt会自动渲染错误布局并处理路由状态
• 确保@nuxtjs/composition-api版本适配Nuxt 2.15.7，避免版本不兼容导致上下文读取异常

内容的提问来源于stack exchange，提问作者robskrob