History mode

History mode

이 문서에서는 Vue router에서 설정 가능한 history 모드의 차이점에 대해서 살펴본다.

Vue Routerrouter.vuejs.org

Hash mode

주소 사이에 hash(#) 기호를 넣어 관리하는 방식이다. 주소가 다음과 같이 표시된다.

http://localhost:8080/#/
http://localhost:8080/#/first
http://localhost:8080/#/second
http://localhost:8080/#/third/list

주소에서 hash(#) 기호 뒤는 요청 변수로 인식하지 않는다. 따라서 화면이 변화해도 서버로 요청이 가지 않는다. 즉, 서버에서는 최초 페이지에 대한 요청만 처리할 수 있도록 구현하면 된다.

hash mode는 createWebHashHistory() 함수를 호출하여 설정할 수 있다.

import {createWebHashHistory, createRouter} from 'vue-router';
const router = createRouter({
    history:createWebHashHistory(),
    //생략
});

Hash mode에서는 주소에 hash(#)가 생성된다

hash mode 문제점

hash mode 방식은 검색엔진 최적화(SEO, Search Engine Optimization)이 이루어지지 않는다는 것이다. hash(#) 이후 글자들로 화면을 구분하기 때문에 검색엔진에서 해당 페이지의 정보를 수집할 수 없어 검색엔진에 메인페이지를 제외한 나머지 페이지들이 노출되지 않는다.

HTML5 mode

주소를 일반 주소와 동일하게 관리하는 방식이다. 주소가 다음과 같이 표시된다

http://localhost:8080/
http://localhost:8080/first
http://localhost:8080/second
http://localhost:8080/third/list

주소에 hash(#) 기호가 없어 모든 요청이 서버를 거치게 된다. 따라서 서버에서는 해당 주소에 대한 처리를 구현해야 한다.

HTML5 mode는 createWebHistory() 함수를 호출하여 설정할 수 있다.

import {createWebHistory, createRouter} from 'vue-router';
const router = createRouter({
    history:createWebHistory(),
    //생략
});

HTML5 mode에서는 주소에 Hash(#)가 생성되지 않는다

Memory mode

주소를 변화하지 않고 내부 메모리 수준에서 화면 변화 이력을 관리하는 방식이다. 주소가 다음과 같이 고정된다.

http://localhost:8080/

memory mode는 createMemoryHistory() 함수를 호출하여 설정할 수 있다.

import {createMemoryHistory, createRouter} from 'vue-router';
const router = createRouter({
    history:createMemoryHistory(),
    //생략
});

Memory mode에서는 주소가 변하지 않는다

memory mode 사용 시 주의 사항

memory mode 방식에서는 브라우저에 주소 변경 이력이 남지 않기 때문에 뒤로 가기 또는 앞으로 가기가 불가능하다.