> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vue-router-4/history-mode.md).

# History mode

## History mode

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

{% embed url="<https://router.vuejs.org/guide/essentials/history-mode.html>" %}

### Hash mode

주소 사이에 <mark style="color:blue;">`hash(#)`</mark> 기호를 넣어 관리하는 방식이다. 주소가 다음과 같이 표시된다.

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

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

<mark style="color:blue;">`hash mode`</mark>는 <mark style="color:red;">`createWebHashHistory()`</mark> 함수를 호출하여 설정할 수 있다.

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

<div align="left"><img src="/files/B7ooqMV3NNQowP5m9lCj" alt="Hash mode에서는 주소에 hash(#)가 생성된다"></div>

{% hint style="info" %}

#### hash mode 문제점

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

### HTML5 mode

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

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

주소에 <mark style="color:blue;">`hash(#)`</mark> 기호가 없어 모든 요청이 서버를 거치게 된다. 따라서 서버에서는 해당 주소에 대한 처리를 구현해야 한다.

<mark style="color:blue;">`HTML5 mode`</mark>는 <mark style="color:red;">`createWebHistory()`</mark> 함수를 호출하여 설정할 수 있다.

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

<div align="left"><img src="/files/Dapam3gqC7ur9f3zeZDL" alt="HTML5 mode에서는 주소에 Hash(#)가 생성되지 않는다"></div>

### Memory mode

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

```
http://localhost:8080/
```

<mark style="color:blue;">`memory mode`</mark>는 <mark style="color:red;">`createMemoryHistory()`</mark> 함수를 호출하여 설정할 수 있다.

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

<div align="left"><img src="/files/dwfyZWXOO0JElXnYNbum" alt="Memory mode에서는 주소가 변하지 않는다"></div>

{% hint style="info" %}

#### memory mode 사용 시 주의 사항

<mark style="color:blue;">`memory mode`</mark> 방식에서는 브라우저에 주소 변경 이력이 남지 않기 때문에 뒤로 가기 또는 앞으로 가기가 불가능하다.
{% endhint %}