개요

Vue-Router를 사용하여 존재하지 않는 페이지로 전환하는 경우 404 오류 페이지를 만듭니다.

만든다고 해도 vue-router에 기능으로서 존재하기 때문에 바로 할 수 있습니다.

구현

Vue-router

router.js

import NotFoundComponent from './components/top/NotFoundComponent'

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      name: 'notFound',
      path: '*', 
      component: NotFoundComponent 
    }
  ],
)}

NotFoundComponent 작성

NotFoundComponent.vue

<template>
  <div>
    <img
      :src="`/images/404.svg`"
      alt="404">
  </div>
</template>
<script>
<style scoped>
img{
  width: 100%;
}
@media (max-width: 1000px){
div{
  background: #DEF2FF;
  width: 100vw;
  height: 80vh;
}
}
</style>

template도 화상으로 끝나고 있으므로, 엄청 손을 뽑고 있습니다. 웃음
시간이 있을 때 정교한 것을 만들려고 합니다.



단지 이미지가 그것 같으면 그 같다. 웃음

요약

기능으로서 404 에러 페이지 간단하게 구현할 수 있으므로 편리하네요.