[Vue Router] Hash Mode vs History Mode

Jan 02, 2024

Contents

Vue Router는 해시(hash, #) 모드와 히스토리(history) 모드 2가지를 지원합니다. 기본값은 해시 모드 입니다.

1. Hase Mode

해시 모드는 SPA가 개발되기 시작하면서 고안된 기법으로 해시태그를 사용하여 페이지를 이동하는 것처럼 보이지만 실제로는 페이지를 이동하지 않습니다. 이는 브라우저가 페이지 경로를 읽을 때 해시(#) 뒤쪽으로 오는 문자열은 경로로 인식하지 않는 성질을 이용한 것입니다.

https://developer.mozilla.org/en-US/docs/web/api/window/hashchange_event

Window: hashchange event - Web APIs | MDN The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol). developer.mozilla.org

URL에서 #은 hash라고 불리어지며 그 해쉬가 변경되는걸 감지해주는 web api가 있다.

위의 기능을 이용해 해쉬가 변경되는걸 vue-router는 감지해서 새로운 페이지로 페이지의 갱신없이 랜더링하는게 가능한 것이다.

해시모드의 경우 호스트 주소와 경로 사이에 해시(#)를 붙여 URL을 나타냅니다.

해시 모드

프로토콜://호스트주소:포트/#/경로

2. History Mode

히스토리 모드는 HTML5의 history API를 사용하는 방법입니다. history API는 pushState라는 메소드를 제공하는데, 이 메소드는 URL을 변경하고 브로우저의 히스토리를 남기지만 실제로는 페이지를 이동하지 않는 기능을 가집니다. 그러므로 pushState를 사용하여 URL을 변경하면 브라우저가 페이지 이동으로 인식하지 않습니다. 그러나 히스토리가 저장되기 때문에 사용자에게 실제 페이지를 이동한 것처럼 보이도록 합니다.

히스토리 모드

프로토콜://호스트주소:포트/경로

물론 Vue Router는 해시 모드든 히스토리 모드든 내부적으로는 history API를 사용하여 라우팅 하기 때문에 해시 모드 역시 히스토리를 저장합니다. 다만 history API를 지원하지 않는 브라우저의 경우 해시 모드는 페이지가 이동하지 않지만 히스토리 모드는 페이지가 이동해버린다는 단점이 있습니다.