当前位置：首页 > VUE

vue实现页面500

2026-02-18 16:06:24VUE

Vue 实现页面 500 错误处理

在 Vue 项目中，可以通过全局错误处理或组件级错误捕获来实现 500 错误的展示与处理。以下是具体实现方法：

全局错误处理

通过 Vue 的全局错误处理器 errorHandler 捕获未处理的异常，并跳转到自定义 500 页面：

// main.js 或入口文件
Vue.config.errorHandler = (err, vm, info) => {
  console.error('全局错误:', err)
  router.push('/500') // 跳转到 500 页面
}

路由级错误处理

在 Vue Router 中配置全局前置守卫和错误捕获：

// router.js
router.beforeEach((to, from, next) => {
  // 模拟 API 请求失败
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/500')
  } else {
    next()
  }
})

router.onError((error) => {
  console.error('路由错误:', error)
  router.push('/500')
})

自定义 500 页面组件

创建专门的错误页面组件：

<!-- components/Error500.vue -->
<template>
  <div class="error-page">
    <h1>500 - 服务器内部错误</h1>
    <p>抱歉，服务器处理您的请求时出现问题</p>
    <button @click="goHome">返回首页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/')
    }
  }
}
</script>

Axios 拦截器处理

对于 API 请求的 500 错误，可以通过 Axios 拦截器统一处理：

// utils/http.js
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response && error.response.status === 500) {
      router.push('/500')
    }
    return Promise.reject(error)
  }
)

服务端渲染(SSR)处理

对于 Nuxt.js 项目，可以在 layouts/error.vue 中定义错误页面：

<template>
  <div>
    <h1 v-if="error.statusCode === 500">500 - 服务器错误</h1>
    <button @click="$router.go(-1)">返回</button>
  </div>
</template>

<script>
export default {
  props: ['error']
}
</script>

错误边界组件（Vue 2.6+）

使用 Vue 的错误边界功能捕获组件树中的错误：

<template>
  <error-boundary>
    <component-that-may-error/>
    <template #fallback>
      <div>组件渲染出错，显示备用内容</div>
    </template>
  </error-boundary>
</template>

<script>
import { ErrorBoundary } from 'vue-error-boundary'

export default {
  components: { ErrorBoundary }
}
</script>

实现时需注意错误处理的范围和粒度，避免过度捕获影响正常错误调试。生产环境应记录错误日志以便后续分析。

vue实现页面500