Vue.js 404 핸들링

목적

• 404 페이지의 목적은 사용자가 존재하지 않는 페이지에 접속을 시도해도 사용자가 계속 홈페이지에 남아있도록 하는 것
• 그러기 위해서 조건에 부합하지 않거나, 존재하지 않는 주소에 대해 사전에 만들어 놓은 404 페이지로 리다이렉트하기 위함

사용방법

Page Not Found 컴포넌트와 라우팅 매치하기

• Page Not Found 페이지를 NotFound 컴포넌트에 구현을 한 뒤에 /404 경로와 매칭시킨다.

const routes = [
    {
        path: "/404",
        name: "notFound",
        component: NotFound
    },
];

존재하지 않는 경로들 404 페이지로 리다이렉트하기

• 모든 페이지들을 경로와 매칭시킨 이후, route 포함되지 않은 모든 경로(default 값)에 대해서 /404 페이지로 리다이렉트
• '*' 의 의미는 위에서 어떤 경로와도 매칭이 되지 않은 경우 해당 경로로 이동하라는 의미
• route 맨 아래에 넣으면 됨

const routes = [
    {
        path: '*',
        redirect: "/404"
      	// 아래처럼 바로 NotFound 경로를 매칭해도 됨
      	// component: NotFound
    },
];