Nuxt如何从错误布局重定向到上一页并解决错误页URL不更新问题

问题原因 #

Nuxt 内置的 nuxtError() 方法默认逻辑是渲染错误页组件但保留当前路由地址，不会触发URL跳转，所以会出现页面变为错误页但URL仍为原页面地址的情况。

解决方案 #

步骤1：新增独立错误路由 #

在项目 pages 目录下新建 error.vue 文件，对应你需要的 /error 路由，可直接复用现有错误页逻辑，同时指定你已有的错误布局：

<template>
  <!-- 复用原有错误页展示逻辑即可 -->
  <div>
    <h1>错误 {{ statusCode }}</h1>
    <p>{{ message }}</p>
    <button @click="goBack">返回上一页</button>
  </div>
</template>
<script>
export default {
  layout: 'error_layout', // 关联你已有的错误布局文件
  data() {
    return {
      statusCode: 500,
      message: '系统异常',
      redirectTo: '/'
    }
  },
  created() {
    // 从路由参数读取错误信息和跳转来源
    this.statusCode = this.$route.query.statusCode || 500
    this.message = this.$route.query.message || '系统异常'
    this.redirectTo = this.$route.query.redirect_to || '/'
  },
  methods: {
    goBack() {
      this.$router.push(this.redirectTo)
    }
  }
}
</script>

步骤2：修改Axios拦截器逻辑 #

把原来调用 nuxtError() 的逻辑替换为跳转到独立错误页，同时携带错误信息和原页面路由作为参数：

export default function ({ $axios, redirect, app, error: nuxtError }) {

  $axios.onError((error) => {
    if (error.response) {
      if (error.response.status === 423) {
        redirect({
          name: 'confirm-password',
          query: { redirect_to: app.router.currentRoute.fullPath }
        })
      }
    } else {
      // 未知错误例如网络错误，跳转到独立错误路由
      redirect({
        name: 'error', // 对应pages/error.vue的路由名称
        query: {
          statusCode: 503,
          message: error.message,
          redirect_to: app.router.currentRoute.fullPath // 携带当前页地址用于后续返回
        }
      })
      return Promise.resolve(false)
    }
  })
}

额外说明 #

如果需要处理服务端渲染场景下的错误，可在 nuxt.config.js 中补充服务端错误跳转规则，确保服务端触发的异常也能正确跳转到 /error 路由。
如果不希望错误信息暴露在URL参数中，可将错误信息存入Vuex/Pinia全局状态，跳转后再从全局状态读取对应内容展示即可。

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