Режим HTML5 History

Режим HTML5 History в Vue Router позволяет управлять маршрутизацией без использования символа # в URL, предоставляя чистые и человеко-читаемые адреса. В отличие от режима hash, когда маршруты отображаются после #, HTML5 History использует History API браузера, включая методы pushState, replaceState и событие popstate. Это обеспечивает естественный вид URL, который полностью соответствует современным требованиям веб-приложений.

Для включения режима достаточно при создании экземпляра роутера передать опцию:

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

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

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

export default router;

createWebHistory() создаёт объект истории, который интегрируется с браузером, обеспечивая корректную навигацию без перезагрузки страницы.

Навигация и методы History API

Основные методы для программной навигации:

  • router.push(location) – добавляет новую запись в историю браузера.

    router.push('/about');

  • router.replace(location) – заменяет текущую запись в истории без добавления новой.

    router.replace('/home');

  • router.back() и router.forward() – управляют навигацией по истории, аналогично window.history.back() и window.history.forward().

При использовании HTML5 History важно понимать, что URL меняется без перезагрузки страницы, что позволяет создавать SPA с полноценной навигацией.

Настройка сервера для поддержки HTML5 History

При использовании режима HTML5 History сервер должен корректно обрабатывать запросы на любые маршруты приложения. Если сервер вернёт ошибку 404 для маршрута /about, SPA не сможет отобразить страницу. Стандартное решение — настроить сервер на возврат index.html для всех маршрутов.

Примеры настройки для популярных серверов:

Nginx:

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

Apache:


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

Эта конфигурация обеспечивает корректное разрешение всех маршрутов SPA.

Динамические маршруты и параметры

HTML5 History поддерживает динамические сегменты маршрутов с использованием :param. Например:

const routes = [
  { path: '/user/:id', component: User }
];

В компоненте доступ к параметру осуществляется через route.params:

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.params.id);
  }
};

Маршруты могут содержать несколько параметров и вложенные сегменты, что позволяет создавать сложные схемы навигации.

Вложенные маршруты и переходы

Вложенные маршруты поддерживаются через свойство children:

const routes = [
  { 
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: DashboardHome },
      { path: 'settings', component: DashboardSettings }
    ]
  }
];

В родительском компоненте необходимо использовать для рендеринга дочерних компонентов.

Программное управление историей и сохранение состояния

HTML5 History API позволяет сохранять произвольное состояние вместе с маршрутом:

router.push({ path: '/about', state: { fromDashboard: true } });

Состояние доступно через событие popstate:

window.addEventListener('popstate', event => {
  console.log(event.state);
});

Это особенно полезно для SPA, где требуется восстановление состояния после навигации назад.

Преимущества и ограничения

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

  • Чистые URL без #.
  • Полная совместимость с SEO при правильной серверной настройке.
  • Естественная работа кнопок «назад» и «вперед» в браузере.

Ограничения:

  • Требуется корректная конфигурация сервера.
  • Старые браузеры, не поддерживающие History API, требуют полифиллов или fallback на hash-режим.

Работа с переходами и охрана маршрутов

Vue Router позволяет перехватывать переходы через навигационные охранники:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

Использование охранников в HTML5 History работает так же, как в hash-режиме, обеспечивая гибкую маршрутизацию и контроль доступа.

Оглавление