서론

---

vue-router를 이용하여 라우팅을 처리했다면, 경로에 없는 곳을 들어갈 때 404 페이지를 랜더링 하도록 처리할 수 있다.

아직 vue-router 셋팅이 덜 되었다면 링크 참조.

셋팅이 완료되었다면 다음 본론으로 넘어가자.

본론

---

1. router.js

먼저 router.js 셋팅이다.

import { createWebHistory, createRouter } from "vue-router";

import Home from "./views/Home.vue";
import NotFound from "./views/NotFound.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/404",
    name: "notFound",
    component: NotFound,
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/404",
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

기존의 router.js에서 path가 2가지 추가된 되었다.
1. /404: 페이지를 찾을 수 없을 때 보여줄 컴포넌트를 걸어놓는다.
2. /찾을 수 없는 모든 경로: /404로 redirect를 한다.
굉장히 심플하다.

2. NotFound.vue

필자의 경우에는 ~/views/NotFound.vue를 만들었다.
아래 demo를 이쁘게 꾸며서 자신만의 404 페이지를 만들면 되겠다.

<template>
  <div>
    <label>페이지를 찾을 수 없습니다.</label>
  </div>
</template>

<script>
export default {};
</script>

<style></style>