Vue 项目全局错误处理

1. 使用 Vue Router 的导航守卫

在router/index.js 文件中，可以添加全局的导航守卫来捕获错误并进行跳转。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import NotFound from '@/components/NotFound.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/404', component: NotFound },
    { path: '*', redirect: '/404' } // 捕获所有未匹配的路由
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 这里可以添加逻辑来判断是否发生错误
  const hasError = false; // 你可以根据实际情况设置这个值

  if (hasError) {
    next('/404'); // 跳转到 /404
  } else {
    next(); // 继续导航
  }
});

export default router;

2. 在组件中捕获错误

如果在某个组件中发生了错误，可以使用 try-catch 语句捕获错误并进行路由跳转。

export default {
  methods: {
    async fetchData() {
      try {
        // 假设这是一个 API 请求
        const response = await this.$http.get('/api/data');
        // 处理响应
      } catch (error) {
        console.error('发生错误:', error);
        this.$router.push('/404'); // 跳转到 /404
      }
    }
  },
  created() {
    this.fetchData();
  }
};

3. 使用 Vue 的错误处理

在 Vue 实例中使用 errorHandler 来捕获全局错误并进行处理：

Vue.config.errorHandler = (err, vm, info) => {
  console.error(err);
  // 跳转到404页面
  vm.$router.push('/404');
};