404 not found

404 not found

이 문서에서는 Vue router에서 404 not found 처리를 수행하는 방법에 대해서 다룬다.

Component 생성

다음 경로에 표시를 위한 컴포넌트를 생성한다.

• /src/components/error/NotFound.vue

NotFound.vue

<template>
    <div>
        <h1>화면을 찾을 수 없습니다</h1>
    </div>
</template>
<script>
    export default {
        name:"NotFound"
    }
</script>
<style scoped>

</style>

Vue Router 설정

Vue Router의 설정 파일에 다음과 같이 추가한다.

/src/router/index.js

import {createWebHistory, createRouter} from 'vue-router';

//주소와 연결할 컴포넌트를 불러온다
import FirstScreenVue from "@/components/FirstScreen.vue";
import SecondScreenVue from "@/components/SecondScreen.vue";

//404 NotFound 처리를 위한 컴포넌트를 불러온다
import NotFoundVue from "@/components/error/NotFound.vue";

const router = createRouter({
    history:createWebHistory(),
    routes:[
        //기본 주소(/) 요청이 올 경우 FirstScreenVue로 연결한다
        {path:"/", component:FirstScreenVue},
        //second 주소 요청이 올 경우 SecondScreenVue로 연결한다
        {path:"/second", component:SecondScreenVue},
        //매핑 가능한 화면이 없을 경우 NotFoundVue로 연결한다
        {path: '/:pathMatch(.*)', component:NotFoundVue},
    ]
});

export default router;

실행 결과

router에서 지원하지 않는 주소일 경우 NotFound.vue 가 출력된다