Режимы истории: hash и history

Vue Router предоставляет два основных режима работы с маршрутизацией: hash и history. Каждый из них определяет способ управления URL и взаимодействия с браузером, что напрямую влияет на поведение приложения и поддержку серверной части.

Hash-режим

Hash-режим использует символ # в URL для разделения клиентской части маршрута от адреса сервера. Например:

http://example.com/#/about

Особенности hash-режима:

  • Все маршруты после # обрабатываются исключительно на стороне клиента.
  • Сервер получает только часть URL до символа #, что упрощает настройку серверной части.
  • Поддержка браузеров полная, включая старые версии, без необходимости конфигурации сервера.
  • Обновление маршрута не вызывает перезагрузку страницы, браузер автоматически скроллит к якорю по умолчанию, если это указано.

Настройка hash-режима:

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;

Преимущества hash-режима:

  • Простота настройки.
  • Не требуется серверная конфигурация.
  • Безопасность от ошибок 404 при обновлении страницы.

Недостатки:

  • URL выглядит менее эстетично.
  • Невозможность полного контроля над историей браузера для некоторых SEO-задач.

History-режим

History-режим использует HTML5 History API, позволяя создавать чистые URL без символа #. Пример:

http://example.com/about

Особенности history-режима:

  • Поддерживает методы pushState и replaceState для управления историей браузера.
  • Позволяет формировать красивые URL, полностью совместимые с SEO.
  • Требует корректной настройки сервера, чтобы все маршруты возвращали index.html приложения.

Настройка history-режима:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Особенности работы на сервере:

  • Сервер должен перенаправлять все запросы на index.html.
  • При прямом вводе URL браузером сервер должен отдавать приложение, чтобы Vue Router смог обработать маршрут.

Преимущества history-режима:

  • Чистые и читаемые URL.
  • Лучшая совместимость с SEO.
  • Возможность полноценного управления навигацией через API.

Недостатки:

  • Необходима дополнительная настройка сервера.
  • Возможны ошибки 404 при неправильной конфигурации.

Сравнение hash и history

Характеристика Hash-режим History-режим
URL example.com/#/about example.com/about
Поддержка старых браузеров Полная Ограниченная
Настройка сервера Не требуется Требуется перенаправление
SEO Плохо Хорошо
Внешний вид URL Менее эстетично Чистый

Практические рекомендации

  • Для малых SPA или приложений без серверной поддержки предпочтителен hash-режим.
  • Для больших приложений, где важен SEO и чистота URL, рекомендуется history-режим с корректной настройкой сервера.
  • Возможна комбинация: начальная разработка на hash, переход на history при деплое на сервер с поддержкой перенаправления.

Работа с программной навигацией

Оба режима поддерживают методы $router.push, $router.replace и router.go:

// Перенаправление на другой маршрут
this.$router.push('/about');

// Замена текущего маршрута без добавления в историю
this.$router.replace('/contact');

// Переход на предыдущий маршрут
this.$router.go(-1);

Эти методы работают идентично в hash и history, различие проявляется только в формате URL и взаимодействии с сервером.

События навигации

Vue Router позволяет отслеживать события навигации независимо от режима:

router.beforeEach((to, from, next) => {
  console.log(`Переход с ${from.fullPath} на ${to.fullPath}`);
  next();
});

router.afterEach((to, from) => {
  console.log(`Переход завершен на ${to.fullPath}`);
});

В hash-режиме события триггерятся при изменении хэша, в history-режиме — при использовании History API.

Оглавление