vue-router를 이용하여 라우팅을 처리했다면, 경로에 없는 곳을 들어갈 때 404 페이지를 랜더링 해보자.
만약 아직 vue-router 셋팅이 덜 되었다면 아래 사람이 잘 정리해 두었다.
셋팅이 완료되었다면 다음 스탭으로 넘어가자.
먼저 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가지 추가된 되었다.
굉장히 심플하다.
본인의 경우에는 views 아래에 NotFound.vue를 만들었다.
아래 demo를 이쁘게 꾸며서 자신만의 404 페이지를 만들면 되겠다.
<template>
<div>
<label>페이지를 찾을 수 없습니다.</label>
</div>
</template>
<script>
export default {};
</script>
<style></style>