Интеграция с Vue

Для интеграции Navigo с Vue необходимо сначала установить библиотеку через npm или подключить через CDN. В случае npm:

npm install navigo

После установки в компоненте Vue импортируется Navigo:

import Navigo from 'navigo';

Создается экземпляр роутера с указанием корневого пути и режима:

const router = new Navigo('/', { hash: true });
  • ‘/’ — базовый путь приложения.
  • hash: true — использование хэш-маршрутов, удобно для SPA без настройки сервера.

Определение маршрутов

Маршруты в Navigo задаются методом on. В контексте Vue это удобно делать в отдельном файле роутера или в главном компоненте приложения.

router
  .on('/', () => {
    console.log('Главная страница');
  })
  .on('/about', () => {
    console.log('Страница "О нас"');
  })
  .on('/profile/:id', (params) => {
    console.log('Профиль пользователя с ID:', params.id);
  })
  .resolve();

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

  • Параметры маршрута передаются через объект params.
  • Маршруты могут содержать динамические сегменты (:id) и опциональные (:id?).
  • Метод resolve() инициирует проверку текущего URL и вызывает соответствующий обработчик.

Навигация между компонентами Vue

Для отображения компонентов в зависимости от маршрута используется реактивное состояние Vue. Например, хранение текущего компонента в data главного приложения:

import Home from './components/Home.vue';
import About from './components/About.vue';
import Profile from './components/Profile.vue';

new Vue({
  el: '#app',
  data() {
    return {
      currentView: Home
    };
  },
  created() {
    router
      .on('/', () => { this.currentView = Home; })
      .on('/about', () => { this.currentView = About; })
      .on('/profile/:id', (params) => {
        this.currentView = Profile;
        this.userId = params.id;
      })
      .resolve();
  },
  render(h) {
    return h(this.currentView, { props: { userId: this.userId } });
  }
});

Особенности интеграции:

  • Используется динамический рендеринг через render(h).
  • Пропсы компонентов можно передавать напрямую из объекта маршрутов.
  • Обновление маршрута автоматически меняет отображаемый компонент без перезагрузки страницы.

Использование хуков и middleware

Navigo поддерживает хуки перед вызовом обработчика маршрута. Например, проверка авторизации:

router.hooks({
  before(done, params, route) {
    if (route.url.startsWith('/profile') && !isLoggedIn()) {
      router.navigate('/');
      return;
    }
    done();
  }
});
  • done() — обязательно вызывается для продолжения маршрутизации.
  • params и route содержат информацию о текущем маршруте.
  • Можно реализовать логирование, загрузку данных или защиту страниц.

Программная навигация

Переход между маршрутами можно осуществлять программно:

this.$navigateTo = (path) => {
  router.navigate(path);
};
  • Метод navigate(path) изменяет URL и вызывает соответствующий обработчик.
  • Поддерживаются переходы с параметрами и query-параметрами:
router.navigate('/profile/42?tab=settings');

Отслеживание изменений URL

Чтобы компонент Vue реагировал на изменение URL, используется метод resolve():

window.addEventListener('popstate', () => {
  router.resolve();
});
  • Обработчик popstate реагирует на действия браузера: кнопки “назад” и “вперед”.
  • Можно комбинировать с реактивными данными Vue для автоматического обновления компонента.

Поддержка 404 и необработанных маршрутов

Navigo позволяет задать маршрут по умолчанию, который будет вызываться при несоответствии URL:

router.notFound(() => {
  this.currentView = NotFound;
});
  • Рекомендуется создать отдельный компонент <NotFound> для отображения ошибки 404.
  • Позволяет аккуратно обрабатывать неизвестные адреса без падения приложения.

Асинхронная загрузка компонентов

Для крупных SPA полезна ленивое подгружение компонентов:

router.on('/about', async () => {
  const About = await import('./components/About.vue');
  this.currentView = About.default;
}).resolve();
  • Используется динамический import() для оптимизации загрузки.
  • Vue корректно рендерит компонент после подгрузки.
  • Подходит для разделения кода на чанки и ускорения первоначальной загрузки.

Совмещение с Vuex

При необходимости интеграции маршрутов с состоянием приложения можно использовать Vuex:

router.on('/profile/:id', (params) => {
  this.$store.commit('setUserId', params.id);
  this.currentView = Profile;
});
  • Позволяет синхронизировать состояние приложения с текущим маршрутом.
  • Упрощает передачу данных между компонентами без пропсов.
  • Хорошо сочетается с middleware для контроля доступа и логирования.

Итоговая структура проекта

  • main.js — инициализация Vue и Navigo, глобальные хуки.
  • router.js — определение всех маршрутов, middleware, 404.
  • components/ — папка с компонентами, загружаемыми по маршрутам.
  • store/ — Vuex для состояния приложения и передачи данных между компонентами.

Такая структура обеспечивает чистую и гибкую интеграцию Navigo с Vue, позволяет поддерживать SPA с динамическим контентом, защитой маршрутов и ленивой загрузкой компонентов.

Оглавление