vueから返されるエラーページの書き方

Vue.js では、アプリケーションでエラーが発生すると、通常、エラー ページがユーザーに表示されます。この記事では、Vue.jsでエラーページを書く方法を紹介します。

1. vue コンポーネントの作成

まず、ユーザーを歓迎する Vue コンポーネントを作成する必要があります。このコンポーネントには、エラー メッセージやエラー コードなど、発生したエラーに関する情報が含まれている必要があります。

<template>
  <div class="error-page">
    <h1 id="Oops-Something-went-wrong">Oops! Something went wrong.</h1>
    <h3 id="errorMessage">{{ 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>

上記のコードでは、「Error Page」という名前の Vue コンポーネントを定義します。このコンポーネントには、errorMessage と errorCode という 2 つのプロパティがあります。これらのプロパティは、エラーに関する有用な情報をユーザーに提供します。ユーザーがこの情報を提供しない場合、コンポーネントはデフォルト値を使用します。

このコンポーネントは、ページにエラー メッセージとエラー コードを表示します。

2. Vue ルーティングの構成

次に、アプリケーションでエラーが発生したときにエラー ページに移動するように Vue ルーティングを構成する必要があります。

アプリケーションが次のファイル構造を持つと仮定します。

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

Vue ルーティングを設定するには、router.js ファイルを開いて次のコードを追加します。上のコードでは、新しいルーター インスタンスを定義しています。このインスタンスには、Home (/)、About (/about)、および Error (/error) の 3 つのパスがあります。

ユーザーが無効なパスに移動した場合、リダイレクトを使用してエラー ページにリダイレクトします。

Vue.js コードの記述

3. ルーティングを正しく設定したので、アプリケーションに問題が発生したときに正しく移動するための Vue.js コードを作成できます。

まず、App.vue ファイルを開いて次のコードを追加します。

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

上記のコードでは、2 つのイベント リスナーを Vue ルート コンポーネントに追加しました。

最初のリスナーは未処理の拒否イベントです。これは、Promise が拒否され、処理されなかったときに発生するイベントです。

2 番目のエラーは、ハンドルされない JavaScript 例外またはその他のエラーが発生したときに発生するイベントであるグローバル エラーをリッスンします。

これらのイベントが発生すると、Vue ルーティングを使用してユーザーをエラー ページに移動し、エラーに関する情報を渡します。

テスト

4. アプリケーションでエラーが発生すると、自動的にエラー ページにリダイレクトされ、ユーザーにエラー メッセージが表示されます。

エラーをシミュレートすることで、この機能をテストできます。たとえば、コンソールを開いて次のコードを入力できます。

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

このコードが実行されると、エラーに関するメッセージを含むエラー ページにリダイレクトされます。

概要

Vue.js では、エラー ページの表示は重要なタスクです。この記事では、Vue.js でエラー ページを作成する方法を説明します。 Vue コンポーネントを作成し、Vue ルーティングを構成し、ルート Vue コンポーネントにイベント リスナーを追加することで、発生したエラーに関する情報をユーザーに簡単に表示できます。

以上がvueから返されるエラーページの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。