vue-router redirect 404 NotFound 에러페이지

vue-router redirect 404 NotFound 에러페이지

 

 

이번시간에는 사용자가 의도하지 않는 URL로 접근 시 뷰 라우터에 404 오류 페이지로 리다이렉션을 설정해보고자 한다.
아직 vue-router 설정을 하지 않은 경우에는 아래 링크를 확인하여 vue-router를 추가하자.

vue-router 설치 / vue -router 추가 및 라우터 예제

 

• Vue 프로젝트 구조

 

• NotFound.vue

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

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

<style></style>

 

• router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import NotFound from "../views/NotFound.vue";

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: "/notFound",
    name: "notFound",
    component: NotFound
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/notFound"
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

라우터는 위에부터 아래로 하나씩 URL매칭을 확인한다. router 변수에 담긴 path 중 매칭이 되지 않는 URL로 접근 시 마지막 path인 "/:pathMatch(.*)*"로 적용되며 /notFound 컴포넌트로 리다이렉트 된다.

http://localhost:8080/abcd