설정하지 않은 경로에 접속할 경우 404 오류 페이지를 보여주도록 router 설정을 추가해 보자.

• Vue 어플리케이션 구조

vuex3                             # Vue 프로젝트 ROOT
|
├── src                           
|   ├── components                
|   |   ├── layout                # Layout용 컴포넌트 저장위치 
|   |   |   └── LayoutNavi.vue    
|   |   |   └── LayoutFooter.vue  
|   |   ├── common                # 공통 컴포넌트 저장위치 (* 추가)
|   |   |   └── NotFound.vue      # not found 404 컴포넌트 영역 (* 추가)
|   ├── router                    
|   |   └── index.js              # URL와 컴포넌트 router 설정 파일  (* 수정)
|   ├── views                     
|   |   ├── AboutView.vue         # about 컴포넌트 
|   |   ├── PostsView.vue         # posts 컴포넌트 
|   |   └── HomeView.vue          # home 컴포넌트 
|   ├── App.vue                   
|   └── main.js                   

1) NotFound.vue 파일 추가

<template>
    <div>
      <h1>404 Not Found</h1>
      <p>Sorry, the page you are looking for could not be found.</p>
    </div>
</template>

2) router > index.js 파일 수정

import { createRouter, createWebHistory } from 'vue-router'
import HomeView     from '@/views/HomeView.vue'
import NotFound     from '@/components/common/NotFound.vue' /* 404 notfound 추가 */


const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }, // 404 notfound 경로 추가 : start   
  {
    path: "/:catchAll(.*)",
    component: NotFound
  }, // 404 notfound 경로 추가 : end
  {
    path: '/posts',
    name: 'posts',
    component: () => import('../views/PostsView.vue')
  }, 
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3) 설정하지 않은 경로에 접속하여 확인하기

---

본 글에서 설명한 Vue 코드는 [GitHub 바로가기] 에서 다운받을 수 있습니다.