Comment écrire une page d'erreur renvoyée par vue

Dans Vue.js, lorsqu'une erreur survient dans notre application, une page d'erreur est généralement affichée à l'utilisateur. Dans cet article, je vais vous montrer comment écrire des pages d'erreur dans Vue.js.

1. Créer un composant Vue

Tout d'abord, vous devez créer un composant Vue qui accueillera vos utilisateurs. Ce composant doit inclure des informations sur l'erreur survenue, telles qu'un message d'erreur ou un code d'erreur.

<template>
  <div class="error-page">
    <h1>Oops! Something went wrong.</h1>
    <h3>{{ errorMessage }}</h3>
    <p>Error code: {{ errorCode }}</p>
  </div>
</template>

<script>
export default {
  props: {
    errorMessage: {
      type: String,
      default: "An unknown error has occurred."
    },
    errorCode: {
      type: Number,
      default: 500
    }
  }
}
</script>

<style>
.error-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}
</style>

Dans le code ci-dessus, nous définissons un composant Vue appelé "Error Page". Ce composant a deux propriétés : errorMessage et errorCode. Ces propriétés fournissent à l'utilisateur des informations utiles sur l'erreur. Si l'utilisateur ne fournit pas ces informations, le composant utilisera les valeurs par défaut.

Ce composant affiche un message d'erreur et un code d'erreur sur la page.

2. Configuration du routage Vue

Ensuite, vous devez configurer le routage Vue pour accéder à la page d'erreur lorsqu'une erreur se produit dans votre application.

Supposons que votre application ait la structure de fichiers suivante :

src/
  components/
    ErrorPage.vue
  views/
    Home.vue
    About.vue
  router.js
  App.vue
  main.js

Pour configurer le routage Vue, ouvrez le fichier router.js et ajoutez-y le code suivant : #🎜🎜 #

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import ErrorPage from '@/components/ErrorPage.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about', name: 'about', component: About },
    { path: '/error', name: 'error', component: ErrorPage },
    { path: '*', redirect: '/error' }
  ]
})

Dans le code ci-dessus, nous définissons une nouvelle instance de routeur. Cette instance comporte trois chemins : Accueil (/), À propos (/about) et Erreur (/error).

Si l'utilisateur accède à un chemin invalide, nous utilisons des redirections pour le rediriger vers une page d'erreur.

Écrire du code Vue.js

Maintenant que le routage est correctement configuré, nous pouvons écrire du code Vue.js à utiliser dans notre application Corriger la navigation lorsque des erreurs de programme surviennent.

Tout d'abord, ouvrez le fichier App.vue et ajoutez-y le code suivant :

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  created() {
    // Error handling
    window.addEventListener('unhandledrejection', (event) => {
      this.$router.push({ name: 'error', params: { errorMessage: event.reason }})
    })
    window.addEventListener('error', (event) => {
      this.$router.push({ name: 'error', params: { errorMessage: event.error }})
    })
  },
}
</script>

Dans le code ci-dessus, nous avons ajouté deux écouteurs d'événements au périphérique du composant racine Vue.

Le premier auditeur est l'événement de rejet non géré, qui est l'événement qui se produit lorsqu'une promesse est rejetée et non gérée.

Le second écoute les erreurs globales, qui sont des événements qui se produisent lorsque des exceptions JavaScript non gérées ou d'autres erreurs se produisent.

Lorsque ces événements se produisent, nous utilisons le routage Vue pour diriger l'utilisateur vers la page d'erreur, en lui transmettant des informations sur l'erreur.

test

Désormais, lorsqu'une erreur se produit dans votre application, vous serez automatiquement redirigé vers la page d'erreur et affiché vers le message d'erreur de l'utilisateur .

Vous pouvez tester cette fonctionnalité en simulant un bug. Par exemple, vous pouvez ouvrir la console et taper le code suivant :

Promise.reject('An error has occurred.')

Lorsque ce code s'exécute, il devrait vous rediriger vers une page d'erreur avec un message concernant l'erreur.

Résumé

Dans Vue.js, afficher les pages d'erreur est une tâche importante. Dans cet article, nous vous montrons comment écrire des pages d'erreur dans Vue.js. En écrivant un composant Vue, en configurant le routage Vue et en ajoutant des écouteurs d'événements au composant racine Vue, nous pouvons facilement afficher des informations à l'utilisateur sur les erreurs survenues.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!