404 페이지 만들기

참고 사이트

https://next.router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route

Dynamic Route Matching with Params | Vue Router

 

404오류를 보여줄 페이지 생성

 

코드

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

<style lang="scss" scoped>
@import "~/scss/main";

.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>

 

기존 index.js 파일에 연결

// 라우터 패키지 가져오기
import { createRouter, createWebHashHistory} from 'vue-router'
// 라우터를 위해 컴포넌트 가져오기
import Home from './Home'
import About from './About'
import Movie from './Movie'
import NotFound from './NotFound'

// 내보내기
export default createRouter({
  // Hash
  // https://google.com/#/search
  // hash 모드를 사용(중간의 /#/이 추가된다.), 페이지를 새로고침하였을때 404에러를 방지해준다.
  // history 모드도 있지만 간단한 처리를 위해서 hash를 사용하였다.(서버쪽에 설정을 추가해 줘야한다.)
  history: createWebHashHistory(),

  // pages: 페이지를 관리할때 사용되는 옵션
  // https://google.com/
  // url에 입력값에 따라 실행될 컴포넌트 지정
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/movie/:id',
      component: Movie
    },
    {
      // 모든 경로
      path: '/:notFound(.*)',
      component: NotFound
    }
  ]
})

 

화면 확인