Режим Hash

Vue Router предоставляет два основных режима маршрутизации: history и hash. Режим hash является базовым и широко используемым вариантом для реализации маршрутизации в одностраничных приложениях (SPA). Основная идея заключается в том, что URL после символа # используется для управления состоянием приложения, при этом браузер не отправляет дополнительные запросы на сервер.

Принцип работы Hash

В режиме hash браузер использует часть URL, называемую hash fragment:

https://example.com/#/home
  • Всё, что находится после #, не отправляется на сервер.
  • Vue Router отслеживает изменения hash и управляет отображением компонентов на основе текущего маршрута.
  • Изменение hash не вызывает полной перезагрузки страницы, что позволяет реализовать SPA с динамическим контентом.

Механизм реализован через событие hashchange, которое браузер генерирует каждый раз при изменении фрагмента URL. Vue Router автоматически подписывается на это событие и обновляет текущий маршрут.

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

Для использования hash-маршрутизации необходимо указать mode: 'hash' при создании экземпляра VueRouter:

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;

Ключевые моменты:

  • createWebHashHistory() создаёт историю на основе hash.
  • URL всегда содержит символ #, за которым следует маршрут.
  • Режим hash полностью совместим со старыми браузерами.

Сравнение с режимом History

Характеристика Hash History
URL /#/route /route
Поддержка браузеров Любой, включая старые Современные (HTML5)
Требования к серверу Нет дополнительных настроек Необходима настройка серверного перенаправления на index.html
SEO Ограниченные возможности Лучшее индексирование

Hash-маршрутизация проще в настройке, но менее привлекательна для SEO и визуально выглядит менее “чисто”.

Навигация с использованием Hash

Vue Router предоставляет несколько способов навигации:

  1. Программная навигация с помощью router.push:
this.$router.push('/about');
  1. Навигация через ссылку <router-link>:
<router-link to="/about">О нас</router-link>

В режиме hash ссылки автоматически преобразуются в формат /#/about.

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

Hash-маршруты поддерживают динамические сегменты и параметры:

const routes = [
  { path: '/user/:id', component: User }
];
  • URL будет выглядеть как: /#/user/42
  • Доступ к параметрам маршрута через this.$route.params.id:
export default {
  mounted() {
    console.log(this.$route.params.id);
  }
};
  • Возможна обработка query-параметров через this.$route.query:
// URL: /#/search?query=vue
console.log(this.$route.query.query); // 'vue'

Программное управление hash

Vue Router позволяет программно управлять текущим hash:

router.replace('/home'); // заменяет текущий маршрут без добавления в историю
router.go(-1);           // переход на предыдущий маршрут
  • push добавляет запись в историю браузера.
  • replace заменяет текущую запись без изменения истории.
  • go(n) позволяет перемещаться по истории на n шагов.

Ограничения и особенности

  • SEO: Поисковые системы индексируют hash-часть URL ограниченно.
  • История браузера: Каждое изменение hash создаёт запись в истории, что может повлиять на работу кнопок “Назад” и “Вперёд”.
  • Анимации переходов: Поддерживаются стандартные переходы Vue, но важно учитывать, что hash изменяется мгновенно.
  • Совместимость с серверами: Не требует настроек серверной части, так как сервер всегда получает один и тот же основной URL без hash.

Пример структуры SPA с hash

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');
// router.js
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 },
  { path: '/user/:id', component: () => import('./components/User.vue') }
];

export default createRouter({
  history: createWebHashHistory(),
  routes
});
  • Главная страница: /#/
  • Страница “О нас”: /#/about
  • Страница пользователя с id: /#/user/123

Выводы по режиму Hash

Режим hash обеспечивает:

  • Простую и надёжную маршрутизацию без необходимости серверной настройки.
  • Полную совместимость с любыми браузерами.
  • Управление состоянием SPA через URL без перезагрузки страницы.

Он идеально подходит для приложений, где важна простота установки и работа на статическом хостинге.

Оглавление