# hash vs history

## 1️⃣ Hash mode (`#/path`)

Пример URL:

```
http://site.com/#/modules

```

### Как работает

- Всё, что после `#`, **не отправляется на сервер**
- Навигацией полностью управляет **Vue Router**
- Серверу вообще не нужно знать о роутинге

### Плюсы ✅

✔ Работает **без настройки сервера**  
✔ Можно открыть страницу напрямую  
✔ Подходит для GitHub Pages, static hosting

### Минусы ❌

✖ URL выглядит «грязно» (`#`)  
✖ Хуже для SEO

### Как включается

```ts
createWebHashHistory()

```

---

## 2️⃣ History mode (`/path`)

Пример URL:

```
http://site.com/modules

```

### Как работает

- URL **реальный**
- При обновлении браузер идёт на сервер
- Сервер должен вернуть `index.html`

### Плюсы ✅

✔ Красивые URL  
✔ Лучше для SEO  
✔ Стандарт для продакшена

### Минусы ❌

✖ Нужна настройка сервера  
✖ Без неё будет 404 при обновлении

### Как включается

```ts
createWebHistory()

```

---

## Главное различие 🔥

<table id="bkmrk-%C2%A0-hash-history-url-%23"><thead><tr><th> </th><th>Hash</th><th>History</th></tr></thead><tbody><tr><td>URL</td><td>`#/modules`</td><td>`/modules`</td></tr><tr><td>Сервер</td><td>Не нужен</td><td>Нужен</td></tr><tr><td>SEO</td><td>Плохо</td><td>Хорошо</td></tr><tr><td>Обновление страницы</td><td>Всегда ок</td><td>404 без конфига</td></tr><tr><td>Продакшен</td><td>Редко</td><td>**Чаще всего**</td></tr></tbody></table>

---

## Когда что использовать

### 🔹 Hash — если:

- нет доступа к серверу
- хостинг статики
- быстрый прототип
- админка без SEO

### 🔹 History — если:

- продакшен
- SEO важно
- есть сервер (Nginx, Apache, Node)

---

## Пример настройки сервера (Nginx)

```nginx
location / {
  try_files $uri $uri/ /index.html;
}

```

---

## В Nuxt

- по умолчанию **history**
- hash почти не используется

---

## Коротко

> **Hash** — просто и без сервера  
> **History** — красиво и правильно, но требует настройки