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 — если:

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

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

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

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

🔹 History — если:

• продакшен

• SEO важно

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

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

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

В Nuxt

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

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

Коротко

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