vue에서 반환된 오류 페이지를 작성하는 방법

Vue.js에서는 애플리케이션에 오류가 발생하면 일반적으로 사용자에게 오류 페이지가 표시됩니다. 이 글에서는 Vue.js에서 오류 페이지를 작성하는 방법을 보여드리겠습니다.

1. vue 구성 요소 만들기

먼저 사용자를 환영할 Vue 구성 요소를 만들어야 합니다. 이 구성 요소에는 오류 메시지나 오류 코드 등 발생한 오류에 대한 일부 정보가 포함되어야 합니다.

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

위 코드에서는 "오류 페이지"라는 Vue 구성 요소를 정의했습니다. 이 구성 요소에는 errorMessage와 errorCode라는 두 가지 속성이 있습니다. 이러한 속성은 사용자에게 오류에 대한 유용한 정보를 제공합니다. 사용자가 이 정보를 제공하지 않으면 구성 요소는 기본값을 사용합니다.

이 구성 요소는 페이지에 오류 메시지와 오류 코드를 표시합니다.

2. Vue 라우팅 구성

다음으로, 애플리케이션에 오류가 발생할 때 오류 페이지로 이동하도록 Vue 라우팅을 구성해야 합니다.

애플리케이션의 파일 구조가 다음과 같다고 가정해 보세요.

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

Vue 라우팅을 구성하려면 router.js 파일을 열고 다음 코드를 추가하세요.

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

위 코드에서는 새 라우터 인스턴스를 정의했습니다. 이 인스턴스에는 홈(/), 정보(/about), 오류(/error)의 세 가지 경로가 있습니다.

사용자가 잘못된 경로로 이동하는 경우 리디렉션을 사용하여 오류 페이지로 리디렉션합니다.

3. Vue.js 코드 작성

이제 라우팅이 올바르게 구성되었으므로 애플리케이션이 잘못되었을 때 올바르게 탐색할 수 있는 Vue.js 코드를 작성할 수 있습니다.

먼저 App.vue 파일을 열고 다음 코드를 추가하세요.

<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 루트 구성 요소에 두 개의 이벤트 리스너를 추가했습니다.

첫 번째 리스너는 처리되지 않은 거부 이벤트입니다. 이는 Promise가 거부되어 처리되지 않을 때 발생하는 이벤트입니다.

두 번째는 처리되지 않은 JavaScript 예외 또는 기타 오류가 발생할 때 발생하는 이벤트인 전역 오류를 수신합니다.

이러한 이벤트가 발생하면 Vue 라우팅을 사용하여 사용자를 오류 페이지로 이동하고 오류에 대한 정보를 전달합니다.

4. Testing

이제 애플리케이션에 오류가 발생하면 자동으로 오류 페이지로 리디렉션되고 오류 메시지가 사용자에게 표시됩니다.

버그를 시뮬레이션하여 이 기능을 테스트할 수 있습니다. 예를 들어 콘솔을 열고 다음 코드를 입력할 수 있습니다.

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

이 코드가 실행되면 오류에 대한 메시지가 포함된 오류 페이지로 리디렉션됩니다.

Summary

Vue.js에서는 오류 페이지를 표시하는 것이 중요한 작업입니다. 이 기사에서는 Vue.js에서 오류 페이지를 작성하는 방법을 보여줍니다. Vue 구성 요소를 작성하고, Vue 라우팅을 구성하고, 루트 Vue 구성 요소에 이벤트 리스너를 추가하면 발생한 오류에 대한 정보를 사용자에게 쉽게 표시할 수 있습니다.

위 내용은 vue에서 반환된 오류 페이지를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!