Hash фрагменты

Hash режим — это один из способов организации маршрутизации в приложениях на Vue.js с использованием Vue Router. Он основан на изменении фрагмента URL, который находится после символа #. Например, URL вида http://example.com/#/about позволяет приложению менять отображаемый компонент без перезагрузки страницы.

Основные особенности

  1. Работа через фрагмент URL В hash режиме браузер не отправляет запрос к серверу при изменении части URL после #. Это делает маршрутизацию полностью клиентской и исключает необходимость настраивать сервер для обработки различных маршрутов.

  2. Синтаксис создания маршрутизатора При создании экземпляра Vue Router необходимо указать режим 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;

    Здесь createWebHashHistory() отвечает за включение hash режима.

  3. Преимущества hash режима

    • Простота настройки: не требует изменений на сервере.
    • Совместимость с устаревшими браузерами.
    • Автоматическая защита от 404 ошибок при обновлении страницы.

  4. Недостатки hash режима

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

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

Для перехода между маршрутами используется компонент <router-link> или метод router.push().

  • Через компонент <router-link>:
<router-link to="/about">О нас</router-link>
  • Через программный вызов:
this.$router.push('/about');

При этом URL изменится на http://example.com/#/about без перезагрузки страницы, а соответствующий компонент будет отображён.

Динамические маршруты в hash режиме

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

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

В компоненте можно получить параметр id через объект route:

export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
};

Навигационные охранники и hash

Hash режим полностью поддерживает навигационные охранники Vue Router:

router.beforeEach((to, from, next) => {
  if (to.path === '/about' && !isLoggedIn()) {
    next('/');
  } else {
    next();
  }
});

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

Скроллинг при hash навигации

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

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  }
});

Это полезно при переходе между страницами или при навигации по якорям внутри одной страницы.

Использование якорей

Hash режим идеально подходит для реализации якорей. Если в маршруте указан дополнительный хеш после маршрута, Vue Router автоматически управляет скроллом:

this.$router.push({ path: '/', hash: '#section2' });

После перехода страница прокрутится к элементу с id="section2".

Особенности работы с вложенными маршрутами

Hash режим поддерживает вложенные маршруты точно так же, как и history режим. Например:

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: 'stats', component: Stats },
      { path: 'settings', component: Settings }
    ]
  }
];

URL будет выглядеть так: http://example.com/#/dashboard/stats. Вложенные маршруты отображаются внутри <router-view> родительского компонента.

Резюме по hash режиму

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

Hash режим остаётся надёжным инструментом для быстрой и безопасной навигации в SPA на Vue.js. Он прост в настройке и обеспечивает совместимость со всеми основными браузерами без дополнительных усилий на сервере.

Оглавление