So schreiben Sie eine von vue zurückgegebene Fehlerseite

Wenn in Vue.js ein Fehler in unserer Anwendung auftritt, wird dem Benutzer normalerweise eine Fehlerseite angezeigt. In diesem Artikel zeige ich Ihnen, wie Sie Fehlerseiten in Vue.js schreiben.

1. Erstellen Sie eine Vue-Komponente

Zuerst müssen Sie eine Vue-Komponente erstellen, die Ihre Benutzer willkommen heißt. Diese Komponente sollte einige Informationen über den aufgetretenen Fehler enthalten, beispielsweise eine Fehlermeldung oder einen Fehlercode.

<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>

Im obigen Code haben wir eine Vue-Komponente namens „Error Page“ definiert. Diese Komponente verfügt über zwei Eigenschaften: errorMessage und errorCode. Diese Eigenschaften liefern dem Benutzer nützliche Informationen über den Fehler. Wenn der Benutzer diese Informationen nicht bereitstellt, verwendet die Komponente Standardwerte.

Diese Komponente zeigt eine Fehlermeldung und einen Fehlercode auf der Seite an.

2. Vue-Routing konfigurieren

Als Nächstes müssen Sie das Vue-Routing konfigurieren, um zur Fehlerseite zu navigieren, wenn in Ihrer Anwendung ein Fehler auftritt.

Angenommen, Ihre Anwendung hat die folgende Dateistruktur:

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

Um das Vue-Routing zu konfigurieren, öffnen Sie die Datei router.js und fügen Sie den folgenden Code hinzu:

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' }
  ]
})

Im obigen Code haben wir eine neue Router-Instanz definiert. Diese Instanz hat drei Pfade: Home (/), About (/about) und Error (/error).

Wenn der Benutzer zu einem ungültigen Pfad navigiert, verwenden wir Weiterleitungen, um ihn auf eine Fehlerseite umzuleiten.

3. Vue.js-Code schreiben

Da wir nun das Routing richtig konfiguriert haben, können wir etwas Vue.js-Code schreiben, um korrekt zu navigieren, wenn die Anwendung fehlschlägt.

Öffnen Sie zunächst die Datei App.vue und fügen Sie den folgenden Code hinzu:

<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>

Im obigen Code haben wir der Vue-Stammkomponente zwei Ereignis-Listener hinzugefügt.

Der erste Listener ist das unbehandelte Ablehnungsereignis, das auftritt, wenn ein Versprechen abgelehnt und nicht behandelt wird.

Der zweite wartet auf globale Fehler, das sind Ereignisse, die auftreten, wenn nicht behandelte JavaScript-Ausnahmen oder andere Fehler auftreten.

Wenn diese Ereignisse auftreten, verwenden wir Vue-Routing, um den Benutzer zur Fehlerseite zu navigieren und Informationen über den Fehler weiterzugeben.

4. Testen

Wenn jetzt ein Fehler in Ihrer Anwendung auftritt, werden Sie automatisch zur Fehlerseite weitergeleitet und die Fehlermeldung wird dem Benutzer angezeigt.

Sie können diese Funktion testen, indem Sie einen Fehler simulieren. Sie können beispielsweise die Konsole öffnen und den folgenden Code eingeben:

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

Wenn dieser Code ausgeführt wird, sollte er Sie zur Fehlerseite mit einer Meldung über den Fehler weiterleiten.

Zusammenfassung

In Vue.js ist die Anzeige von Fehlerseiten eine wichtige Aufgabe. In diesem Artikel zeigen wir Ihnen, wie Sie Fehlerseiten in Vue.js schreiben. Indem wir eine Vue-Komponente schreiben, das Vue-Routing konfigurieren und Ereignis-Listener zur Root-Vue-Komponente hinzufügen, können wir dem Benutzer problemlos Informationen über die aufgetretenen Fehler anzeigen.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine von vue zurückgegebene Fehlerseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!