Vue - 404 Page 페이지 만들기

404 Redirect

존재하지 않는 경로가 있다면 404페이지로 리다이렉트하는 방법

 

 

페이지 생성

컴포넌트로 사용할 페이지를 임폴트

import PageNotFound from '@/views/PageNotFound.vue'

 

 

Vue 2.x

const routes = [
    {
        path: '*',
        redirect: "/404"
    },
];

혹은

const routes = [
    {
        path: '*',
      	component: PageNotFound
    },
];

 

 

Vue 3.x

export const constantRoutes = [
  {
    path: "/:pathMatch(.*)",
    redirect: "/404",
  },
    {
    path: "/404",
    component: PageNotFound,
    meta: {
      title: "PageNotFound",
    },
  },
]