[Java Web programming] [Spring Boot + Vue.js] 게시판 만들기 - 에러
2023.04.07 21:33
[Java Web programming] [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 뷰 페이지로 이동한다.
동작 확인
※ 다른 오류들은 추후 개발하며 현재 포스팅에 추가 예정.
[출처] https://dev-jsk.tistory.com/133
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
