API History

Vue Router предоставляет мощные возможности для управления маршрутизацией в одностраничных приложениях (SPA), используя History API браузера. Этот подход позволяет изменять URL без полной перезагрузки страницы, обеспечивая более плавный пользовательский опыт и возможность использовать навигацию назад и вперед, встроенную в браузер.

Основные режимы маршрутизации

Vue Router поддерживает два ключевых режима работы с URL:

  1. hash mode – использует символ # в URL. Пример: http://example.com/#/home.

    • Простой в настройке, не требует сервера.
    • URL содержит #, что может быть нежелательно для SEO.

  2. history mode – использует History API браузера. Пример: http://example.com/home.

    • Чистые URL без #.
    • Требует корректной настройки сервера для перенаправления всех маршрутов на главный index.html.
    • Позволяет использовать pushState, replaceState и реагировать на popstate событие.

Настройка History режима

При создании экземпляра роутера в Vue 3 применяется функция createWebHistory:

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;

Пояснения:

  • createWebHistory() — создает объект истории на базе History API.
  • URL обновляется без перезагрузки страницы при переходе между маршрутами.
  • Позволяет использовать стандартные методы браузера: кнопки назад и вперед.

Методы History API во Vue Router

router.push()

Используется для программного перехода на новый маршрут:

router.push('/about');
router.push({ name: 'home' });
router.push({ path: '/about', query: { ref: 'newsletter' } });
  • Если маршрут уже совпадает с текущим, вызов вызывает навигационное исключение.
  • Может принимать объект с параметрами path, name, query и params.

router.replace()

Переход без добавления нового элемента в историю:

router.replace('/login');
  • Полезно для редиректов после авторизации или подтверждения форм.
  • Не позволяет пользователю вернуться на предыдущую страницу через кнопку “Назад”.

router.go()

Позволяет перемещаться по истории браузера:

router.go(-1); // назад
router.go(1);  // вперед
  • Аналог стандартного window.history.go().
  • Принимает положительное или отрицательное целое число.

Работа с событиями истории

Vue Router в режиме history автоматически обрабатывает событие popstate, вызываемое при навигации кнопками браузера. Это гарантирует синхронизацию состояния приложения и URL.

Для ручной обработки событий можно использовать глобальные охранники маршрутов:

router.beforeEach((to, from, next) => {
  console.log(`Переход с ${from.fullPath} на ${to.fullPath}`);
  next();
});
  • Позволяет перехватывать навигацию.
  • Можно реализовать логику авторизации, проверки прав доступа или сохранения состояния формы.

Работа с query-параметрами и динамическими сегментами

History API поддерживает любые URL-параметры:

const routes = [
  { path: '/user/:id', component: User }
];
  • Динамический сегмент :id доступен через to.params.id.
  • Query-параметры: /user/123?tab=posts доступны через to.query.tab.

Программная навигация с параметрами:

router.push({ path: `/user/${userId}`, query: { tab: 'settings' } });
  • URL обновляется без перезагрузки.
  • Параметры и query можно использовать для условного рендеринга компонентов.

Настройка сервера для History API

При использовании чистых URL в режиме history сервер должен перенаправлять все маршруты на index.html:

Пример для Nginx:

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

Пример для Apache (.htaccess):


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  • Необходимость связана с тем, что без сервера браузер при прямом переходе на /about выдаст 404, если сервер не перенаправляет на главный HTML-файл.

Преимущества использования History API в Vue Router

  • Чистые URL без #.
  • SEO-дружелюбные маршруты (если настроен сервер).
  • Прозрачная навигация с поддержкой кнопок назад и вперед.
  • Программная маршрутизация через push и replace для динамических переходов.
  • Гибкая работа с параметрами и query.
Оглавление