Vue 如何编写返回错误页面的代码

在Vue项目开发过程中，编写返回错误页面的代码至关重要，它能为用户提供友好的提示，同时提升应用的稳定性与用户体验。

要创建错误页面组件。在Vue项目的components目录下新建一个错误页面组件，比如ErrorPage.vue。在这个组件里，定义基本的HTML结构来展示错误信息。例如：

<template>
  <div class="error-page">
    <h1>哎呀，出错啦！</h1>
    <p>{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorMessage: '很抱歉，出现了未知错误'
    }
  }
}
</script>

<style scoped>
.error-page {
  text-align: center;
  padding: 50px;
}
</style>

上述代码定义了一个简单的错误页面，显示错误标题和一条默认的错误消息。

接下来，配置路由来处理错误页面的跳转。在router/index.js文件中进行如下操作：

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

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '*',
      component: ErrorPage
    }
  ]
});

export default router;

这里使用了通配符*，表示当用户访问的路径不存在时，会自动跳转到ErrorPage组件对应的错误页面。

除了处理路径不存在的错误，还可以在组件内部手动处理错误并跳转到错误页面。比如在某个组件中：

<template>
  <button @click="handleError">点击触发错误</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
   ...mapActions(['pushErrorPage']),
    async handleError() {
      try {
        // 模拟一个可能出错的操作
        await Promise.reject(new Error('模拟错误'));
      } catch (error) {
        this.pushErrorPage(error.message);
      }
    }
  }
}
</script>

在store中定义pushErrorPage方法来实现跳转到错误页面并传递错误消息：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  actions: {
    pushErrorPage({ commit }, errorMessage) {
      commit('SET_ERROR_MESSAGE', errorMessage);
      this.$router.push('/error');
    }
  },
  mutations: {
    SET_ERROR_MESSAGE(state, errorMessage) {
      state.errorMessage = errorMessage;
    }
  },
  state: {
    errorMessage: ''
  }
});

最后在ErrorPage.vue组件中获取store里的错误消息并展示：

<template>
  <div class="error-page">
    <h1>哎呀，出错啦！</h1>
    <p>{{ $store.state.errorMessage }}</p>
  </div>
</template>

通过以上步骤，就能在Vue项目中灵活编写返回错误页面的代码，有效处理各种错误情况。