通过客户端导航到nuxt错误页面?

时间:2020-04-21 16:16:55

标签: vue.js axios nuxt.js vue-router

当我使用nuxt部署通用应用程序时,我注意到抛出异常的客户端$ axios请求只是将错误代码返回到控制台。有没有办法让nuxt重定向到我们在layouts文件夹中指定的error.vue?我似乎只能通过调用服务器端的context.error方法来访问此页面。

我一直在按照以下方式进行处理:

async submit (evt) {
  try {
    const { data } = await this.$axios.get(`some/url`)
    ...
  } catch (e) {
    throw new Error(e) // assume, for the sake of argument, that the error is: { 'statusCode': 403, 'message': 'Forbidden' }
  }
}

2 个答案:

答案 0 :(得分:1)

您应该可以通过$nuxt实用程序在客户端访问相同的错误方法。工作原理完全相同,因此您可能会引发如下错误:

$nuxt.error({ statusCode: 404 })

答案 1 :(得分:1)

在您的catch中,您可以通过

将用户重定向到错误页面
    return this.$nuxt.error({ statusCode: 404, message: 'err message' })

,在您的error.vue页面中,您可以使用error道具来访问它,例如:

<h1>{{ error.statusCode }}</h1>
<h2>{{ error.message }} </h2>