nuxt中全局设置错误处理页面

文档里其实已经写明了，但还是过一遍吧。

问题描述

调接口后，当response返回404，500等status code时，进行统一处理，render到错误页面。

环境

Nuxt v2.6.2, nuxtjs/axios v5.3.6.

步骤

Nuxt 在context 中添加了一个error(params) 方法，下面正是通过调用这个方法来调错误页面。

两步即可：

• 在plugins/axios.js文件中，统一添加错误处理：

  export default function ({ $axios, error }) {
    $axios.onError(e => {
      if(e.response.status === 403) {
        error({ statusCode: 403, message: "forbidden" })
      }
  
      if(e.response.status === 404) {
        error({ statusCode: 404, message: "not found" })
      }
  
      if(e.response.status === 500) {
        error({ statusCode: 500, message: "server error" })
      }
    })
  }
  

  每次axios 发送请求后，当response 返回错误时，会调用error这个method，而error 这个方法可以用来调用错误页面 error page。

• 在layouts 中添加 error.vue 文件，这个文件就是出错时render的error page.

  error.vue的内容可以长这样：

  <template>
    <div class="container">
      <h1 v-if="error.statusCode === 403">Forbidden</h1>
      <h1 v-if="error.statusCode === 404">Page not found</h1>
      <h1 v-if="error.statusCode === 500">Server Error</h1>
      <nuxt-link to="/">Home page</nuxt-link>
    </div>
  </template>
  
  <script>
  export default {
    props: ['error'],
    layout: 'blank'
  }
  </script>
  

  这里需要注意的是：

  当前版本的nuxt，在error.vue中设置layout是无效的。

  不过这个问题已修复，下一版本应该会发布，戳bug(csr): error page layout not correctly applied #2537 可查看详情。
  「2019-10-14更新： 在2.10.0版本中，已经修复了该问题，可查看release了解」
  好了，搞定，收工！！

参考

Error page

Axios Helpers

bug(csr): error page layout not correctly applied