当前位置：首页 > VUE

vue实现页面500

2026-03-10 05:20:45VUE

Vue 实现页面 500 错误处理

在 Vue 应用中处理 500 服务器错误通常涉及前端错误捕获和展示友好的错误页面。以下是几种实现方式：

使用全局错误处理

通过 Vue 的全局错误处理器 errorHandler 捕获未被处理的异常，并重定向到 500 页面。

// main.js
Vue.config.errorHandler = (err, vm, info) => {
  console.error(`Error: ${err.toString()}\nInfo: ${info}`);
  router.push('/500'); // 重定向到 500 页面
};

路由配置中捕获错误

在 Vue Router 的导航守卫中捕获 HTTP 500 错误，例如通过拦截 API 响应错误码。

vue实现页面500

// router.js
router.beforeEach((to, from, next) => {
  axios.interceptors.response.use(
    response => response,
    error => {
      if (error.response.status === 500) {
        next('/500');
      }
      return Promise.reject(error);
    }
  );
  next();
});

创建专用错误页面

设计一个 500 错误页面组件，用于展示友好的错误信息。

<!-- components/Error500.vue -->
<template>
  <div class="error-page">
    <h1>500</h1>
    <p>服务器内部错误，请稍后再试。</p>
    <button @click="$router.push('/')">返回首页</button>
  </div>
</template>

结合 HTTP 拦截器

使用 Axios 拦截器统一处理后端返回的 500 状态码，触发错误页面跳转。

vue实现页面500

// utils/http.js
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 500) {
      store.commit('setError', error.response.data.message);
      router.push('/500');
    }
    return Promise.reject(error);
  }
);

通过状态管理传递错误信息

在 Vuex 中存储错误状态，动态控制错误页面的显示内容。

// store.js
const store = new Vuex.Store({
  state: {
    error: null
  },
  mutations: {
    setError(state, error) {
      state.error = error;
    }
  }
});

服务端渲染 (SSR) 场景

对于 Nuxt.js 等 SSR 框架，可在 asyncData 或 fetch 方法中捕获 500 错误。

// Nuxt page component
export default {
  async asyncData({ $axios, error }) {
    try {
      const data = await $axios.$get('/api/endpoint');
      return { data };
    } catch (e) {
      error({ statusCode: 500, message: '服务器错误' });
    }
  }
};