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

Posted 2023-02-22

【中文标题】通过客户端导航到 nuxt 错误页面？

【英文标题】：Navigate to nuxt error page via client side?

【发布时间】：2020-08-04 11:18:52

【问题描述】：

当我使用 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' 
  

【参考方案1】：

您应该可以通过$nuxt 实用程序在客户端访问相同的错误方法。工作原理完全相同，因此您可以抛出错误，例如：

$nuxt.error( statusCode: 404 )

【参考方案2】：

在您的catch 中，您可以通过

将用户重定向到错误页面

    return this.$nuxt.error( statusCode: 404, message: 'err message' )

在您的error.vue 页面中，您可以使用error 属性访问它，例如：

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