Vue 프로젝트 404 Page Not Found

 

Vue 프로젝트 404 Page Not Found

 

1. /src/routes/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>
@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>

 

2. /src/routes/index.js 수정

/* 페이지를 관리해주는 구성 파일 */
...
import NotFound from './NotFound'

export default createRouter({
...
  routes: [
    ...
    {
      path: '/about',
      component: About
    },
    {
      path: '/:notFound(.*)',
      component: NotFound
    }
...

 

결과

 

---

 

참고

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

Dynamic Route Matching with Params | Vue Router