[Vue.js] 404 Page Rendering

슈퍼만쓰·2021년 10월 31일
0
post-thumbnail

들어가며

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

만약 아직 vue-router 셋팅이 덜 되었다면 아래 사람이 잘 정리해 두었다.

https://velog.io/@mahns/vue-router-vue3

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

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를 한다.

굉장히 심플하다.

NotFound.vue

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

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

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

<style></style>
profile
https://mahns.oopy.io/ 블로그 이전

0개의 댓글