Bagaimana untuk menulis halaman ralat yang dikembalikan oleh vue

Dalam Vue.js, apabila ralat berlaku dalam aplikasi kami, halaman ralat biasanya dipaparkan kepada pengguna. Dalam artikel ini, saya akan menunjukkan kepada anda cara menulis halaman ralat dalam Vue.js.

1. Buat komponen vue

Pertama, anda perlu mencipta komponen Vue yang akan mengalu-alukan pengguna anda. Komponen ini harus memasukkan beberapa maklumat tentang ralat yang berlaku, seperti mesej ralat atau kod ralat.

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

Dalam kod di atas, kami mentakrifkan komponen Vue yang dipanggil "Halaman Ralat". Komponen ini mempunyai dua sifat: errorMessage dan errorCode. Sifat ini memberikan pengguna maklumat berguna tentang ralat. Jika pengguna tidak memberikan maklumat ini, komponen akan menggunakan nilai lalai.

Komponen ini memaparkan mesej ralat dan kod ralat pada halaman.

2. Mengkonfigurasi penghalaan Vue

Seterusnya, anda perlu mengkonfigurasi penghalaan Vue untuk menavigasi ke halaman ralat apabila ralat berlaku dalam aplikasi anda.

Anggapkan aplikasi anda mempunyai struktur fail berikut:

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

Untuk mengkonfigurasi penghalaan Vue, buka fail router.js dan tambahkan kod berikut padanya:

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

Dalam kod di atas, kami mentakrifkan contoh penghala baharu. Contoh ini mempunyai tiga laluan: Laman Utama (/), Perihal (/kira-kira) dan Ralat (/ralat).

Jika pengguna menavigasi ke laluan yang tidak sah, kami menggunakan ubah hala untuk mengubah hala mereka ke halaman ralat.

3. Menulis Kod Vue.js

Sekarang kita mempunyai penghalaan yang dikonfigurasikan dengan betul, kita boleh menulis beberapa kod Vue.js untuk menavigasi dengan betul apabila aplikasi menjadi salah.

Mula-mula, buka fail App.vue dan tambahkan kod berikut ke dalamnya:

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

Dalam kod di atas, kami telah menambah dua pendengar acara pada komponen akar Vue.

Yang pertama mendengar peristiwa penolakan yang tidak dikendalikan, iaitu peristiwa yang berlaku apabila Janji ditolak dan tidak ditangani.

Yang kedua mendengar ralat global, iaitu peristiwa yang berlaku apabila pengecualian JavaScript yang tidak dikendalikan atau ralat lain berlaku.

Apabila peristiwa ini berlaku, kami menggunakan penghalaan Vue untuk menavigasi pengguna ke halaman ralat, menyampaikan maklumat tentang ralat.

4. Ujian

Sekarang apabila ralat berlaku dalam aplikasi anda, anda akan diubah hala secara automatik ke halaman ralat dan memaparkan mesej ralat kepada pengguna.

Anda boleh menguji ciri ini dengan mensimulasikan pepijat. Sebagai contoh, anda boleh membuka konsol dan menaip kod berikut:

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

Apabila kod ini dijalankan, ia sepatutnya mengubah hala anda ke halaman ralat dengan mesej tentang ralat.

Ringkasan

Dalam Vue.js, memaparkan halaman ralat ialah tugas penting. Dalam artikel ini, kami menunjukkan kepada anda cara menulis halaman ralat dalam Vue.js. Dengan menulis komponen Vue, mengkonfigurasi penghalaan Vue dan menambahkan pendengar acara pada komponen akar Vue, kami boleh memaparkan maklumat dengan mudah kepada pengguna tentang ralat yang berlaku.

Atas ialah kandungan terperinci Bagaimana untuk menulis halaman ralat yang dikembalikan oleh vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!