hash vs history

1️⃣ Hash mode (#/path)

Пример URL:

http://site.com/#/modules

Как работает

• Всё, что после #, не отправляется на сервер

• Навигацией полностью управляет Vue Router

• Серверу вообще не нужно знать о роутинге

Плюсы ✅

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

Минусы ❌

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

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

createWebHashHistory()

---

2️⃣ History mode (/path)

Пример URL:

http://site.com/modules

Как работает

• URL реальный

• При обновлении браузер идёт на сервер

• Сервер должен вернуть index.html

Плюсы ✅

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

Минусы ❌

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

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

createWebHistory()

---

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

	Hash	History
URL	#/modules	/modules
Сервер	Не нужен	Нужен
SEO	Плохо	Хорошо
Обновление страницы	Всегда ок	404 без конфига
Продакшен	Редко	Чаще всего

---

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

🔹 Hash — если:

• нет доступа к серверу

• хостинг статики

• быстрый прототип

• админка без SEO

🔹 History — если:

• продакшен

• SEO важно

• есть сервер (Nginx, Apache, Node)

---

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

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

---

В Nuxt

• по умолчанию history

• hash почти не используется

---

Коротко

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