404 Page Not Found

이번에는 지정된 페이지가 아닌 로드로 사용자가 접근을 했을 때 메세지를 보여줄 수 있는 페이지를 만들어보도록 하겠습니다.

vue router next 공식문서 를 함께 확인하면 이해에 더 도움을 받을 수 있겠습니다.

const routes = [
  // will match everything and put it under `$route.params.pathMatch`
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // will match anything starting with `/user-` and put it under `$route.params.afterUser`
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

특정한 경로 부분에 정규표현식을 제공을 해서, 그 정규표현식과 매칭되는 주소는 not found라는 페이지를 제공하는 것입니다.

movie의 경우 /movie/:id 와 같이 :id 파라미터를 통해 동적으로 페이지를 제어할 수 있었습니다. 404Not Found의 경우 '/:pathMatch(.*)*' 과 같이 이용할 수 있습니다.

여기서 꼭 pathMatch로 작성할 필요는 없고 원하는 이름으로 작성을 해도 괜찮습니다.

NotFound.vue

route폴더 내부에 NotFound.vue 파일을 만들어줍니다.

<template>
  <div class="not-found">
    <div class="status">
      404
    </div>
    <div class="message">
      Page Not Found!
    </div>
  </div>
</template>

<style lang="scss" scoped>
.not-found {
  line-height: 1.2;
  text-align: center;
  font-family: "Oswald", sans-serif;
  padding: 80px 20px;
  .status {
    font-size: 160px;
    color: $primary;
  }
  .message {
    font-size: 50px;
  }
}
</style>

routes > index.js

이렇게 만든 페이지를 index.js에 연결을 해줍니다.

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './Home'
import Movie from './Movie'
import About from './About'
import NotFound from './NotFound'

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/movie/:id',
      component: Movie
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/:NotFound(.*)',
      component: NotFound
    }
  ]
})