> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vue-router-4/404-not-found.md).

# 404 not found

## 404 not found

이 문서에서는 <mark style="color:blue;">`Vue router`</mark>에서 <mark style="color:red;">`404 not found`</mark> 처리를 수행하는 방법에 대해서 다룬다.

### Component 생성

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

* /src/components/error/NotFound.vue

<details>

<summary>NotFound.vue</summary>

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

</style>
```

</details>

### Vue Router 설정

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

{% code title="/src/router/index.js" %}

```javascript
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;
```

{% endcode %}

### 실행 결과

<div align="left"><img src="https://4208234536-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_TNZwLuHV9ipYLbvRq%2Fuploads%2FrCUT0YWhmaCqlk5KVi2z%2Fvue-router-404.gif?alt=media&amp;token=62c0972f-371c-4b1d-9d93-b0db9091c146" alt="router에서 지원하지 않는 주소일 경우 NotFound.vue 가 출력된다"></div>