Vue Router는 Vue.js 애플리케이션에서 클라이언트 사이드 라우팅을 구현하는데 사용되는 공식 라우팅 라이브러리입니다. 이 라이브러리는 히스토리 모드와 해시 모드 두 가지 라우팅 모드를 지원합니다. 각 모드는 고유한 특징과 용도가 있으며, 프로젝트의 요구사항에 맞게 선택하여 사용할 수 있습니다.
히스토리 모드 (History Mode)
Vue Router의 히스토리 모드는 HTML5 History API를 이용하여 라우팅을 처리하는 방식입니다. 이 모드는 실제 서버의 URL을 사용하여 라우팅을 처리하기 때문에 URL이 깔끔하고 예쁘게 보입니다. 예를 들어, “/home”, “/about”, “/contact” 등과 같이 경로를 의미하는 URL을 사용할 수 있습니다.
히스토리 모드를 사용하려면 Vue Router 설정에서 mode: 'history' 옵션을 추가해야 합니다.
const router = new VueRouter({
mode: 'history',
routes: [...]
})
히스토리 모드를 사용할 때는 서버 측 구성과 함께 설정이 필요하며, 단일 페이지 애플리케이션이 아닌 경우 서버 측에서도 모든 경로에 대해 Vue 앱을 서빙할 수 있어야 합니다.
해시 모드 (Hash Mode)
해시 모드는 URL의 해시를 사용하여 라우팅을 처리하는 방식입니다. 예를 들어, “/#/home”, “/#/about”, “/#/contact”와 같은 형태로 URL이 표시됩니다. 이 모드는 간단한 설정과 서버 측 구성 없이 바로 사용할 수 있으며, 별다른 추가 작업 없이 Vue 애플리케이션을 서빙할 수 있습니다.
기본적으로 Vue Router는 해시 모드를 사용하고 있으므로 별도의 설정이 필요하지 않습니다.
어떤 모드를 선택해야 하는가?
히스토리 모드와 해시 모드 중 어떤 모드를 선택해야 할지는 프로젝트의 요구사항과 환경에 따라 다를 수 있습니다.
- 히스토리 모드는 URL이 깔끔하고 가독성이 좋으며, 실제 서버의 URL과 동일하게 표시됩니다. 하지만 서버 설정이 필요하고, 일부 환경에서 호스팅이 어려울 수 있습니다.
- 해시 모드는 간단한 설정으로 바로 사용할 수 있으며, 서버 측 구성이 필요하지 않습니다. 그러나 URL에 해시가 포함되어 가독성이 떨어질 수 있습니다.
따라서 프로젝트의 특성과 환경을 고려하여 적합한 라우팅 모드를 선택해야 합니다. Vue Router는 이러한 선택의 자율성을 제공하여, 개발자가 프로젝트에 맞게 적절한 라우팅 모드를 선택할 수 있도록 도와줍니다.
이상으로 Vue Router의 히스토리 모드와 해시 모드에 대해 알아보았습니다.
참조: