Spring boot + vue 프로젝트 Router 404 이슈

⚡ 개요

spring boot + vue 프로젝트를 진행할 때, vue에서 router를 설정했지만, 새로고침을 하는 순간 404 에러 페이지가 로드되는 이슈에 대해서 내용 및 수정 방법에 대해서 정리를 하려고 한다.

 

일단 기본적으로 404가 나오는 이유에 대해서 설명하자면 새로고침을 하는 순간 spring에서 servelt에 맵핑된 주소를 찾는데 없기 때문에 404가 발생하는 것이다. 단순하게 컨트롤러에 전부 맵핑을 해준다면 해결되는 이슈이기도 하다.

 

Vue는 SPA이고, index.html 페이지 내에서 모든 동작이 이뤄지도록 되어있다. 페이지 이동을 몇 번을 하던 결국은 index.html 페이지 하나에서 동작한다고 보면 된다.

 

⚡ History Mode

vue 공식 문서를 확인 해보면 History Mode 에 대해서 어떻게 처리를 해야 하는지 알려주고 있다. 

• vue 가이드

HTML5 히스토리 모드 | Vue Router

 

가이드 내용을 보면 Apache, nginx, Native Node.js 등 설정 가이드를 제공하고 있다. 해당 부분 중 사용하고 있는 부분을 통해서 처리를 하면 된다.

 

But

만약 위의 방법이 너무 까다롭다고 생각하는 경우에는 다른 방법도 존재한다. 바로 HashHistory를 사용하는 것이다.

전달되는 url 앞에 해시문자를 넣어서 router와 controller를 따로 분리하는 것이다. 아래 공식 문서 내용을 첨부해 놓았으니 읽어보면 좋을 거 같다. 

 

위의 내용처럼 router를 구성하고 프로젝트를 실행하고 페이지를 호출하면 URL 뒤에 (#) 해쉬값이 붙어서 표현이 되고 메인 페이지에서 새로고침을 해도 router라고 인식을 해서 새로고침이 정상적으로 된다.

 

공식 가이드 문서 내용처럼 SEO에 나쁜 영향을 미친다고 하니, SEO를 사용하는 경우는 History Mode를 사용하면 될 거 같다.

 

import {createRouter, createWebHashHistory} from 'vue-router';

const routes = [
    { path: '/', component: () => import('@/components/login/login.vue') },
    { path: '/sample', component: () => import('@/components/sample/sample.vue') },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

 

위의 내용과 별반 다르지는 않지만 내가 vue3에서 사용한 router 내용이다. (샘플 코드)