[Spring Boot + Vue.js] 게시판 만들기 - 에러

이번 포스팅에서는 에러 발생 시 후처리에 대해 알아보자

 

404 Error

요청한 페이지가 없을 경우 발생하는 오류

 

구현

1. Vue Router 설정

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Main',
    redirect: '/home',
  },
  {
    path: '*',
    name: '404',
    component: () => import('@/views/error/404.vue'),
  },
  // 홈, 게시판 목록/작성/수정/상세 경로
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

export default router

• 기본경로 / 와 나머지 홈, 게시글 작성, 상세, 수정 경로 이외의 나머지 요청은 없는 페이지이기 때문에 404 뷰로 이동한다.
• VueRouter 의 history 모드는 URL에 해시를 제거하여 API를 이용하여 페이지를 다시 로드하지 않고도 URL 변경이 가능하다.
• process.env.BASE_URL 은 vue.config.js 파일에 설정된 vue-cli 의 publicPath를 의미한다.

2. 404 뷰 구현

<template>
  <v-container>
    <v-card elevation="10" outlined width="100%" class="mx-auto">
      <v-card-title>
        <v-icon large color="black">
          mdi-cancel
        </v-icon>
        <span style="width:5px;"></span>
        <span class="mr-2">404 Error</span>
      </v-card-title>
      <v-card-text>
        <span class="mr-2">Page Not Found</span>
      </v-card-text>
      <v-card-actions>
        <v-btn @click="prev" color="blue-grey" text>
          <v-icon>
            mdi-arrow-left
          </v-icon>
          <span class="mr-2">Back</span>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: 'PageNotFound',
  methods: {
    prev() {
      this.prevPage()
    },
  },
}
</script>

사용 방법

Vue Router 설정을 완료하면 임의의 URL을 요청하면 404 뷰 페이지로 이동한다.

 

동작 확인

 

※ 다른 오류들은 추후 개발하며 현재 포스팅에 추가 예정.