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

Для использования Navigo в приложении на Svelte сначала необходимо установить библиотеку через npm:

npm install navigo

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

import Navigo from 'navigo';

Создание экземпляра роутера обычно выполняется в основном файле приложения, например, App.svelte:

const router = new Navigo('/', { hash: true });

Параметр '/' задаёт базовый URL, а hash: true позволяет использовать хеш-маршрутизацию, что удобно для SPA без настройки серверной части.

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

Маршруты задаются с помощью метода .on(). Для Svelte это чаще всего связано с отображением разных компонентов в зависимости от URL:

import Home from './routes/Home.svelte';
import About from './routes/About.svelte';
import Contact from './routes/Contact.svelte';

router
  .on({
    '/': () => currentComponent = Home,
    '/about': () => currentComponent = About,
    '/contact': () => currentComponent = Contact
  })
  .resolve();

Здесь currentComponent — это реактивная переменная Svelte, которая определяет, какой компонент будет отображён:

<script>
  import { onMount } from 'svelte';
  import Navigo from 'navigo';
  import Home from './routes/Home.svelte';
  import About from './routes/About.svelte';
  import Contact from './routes/Contact.svelte';

  let currentComponent = Home;
  const router = new Navigo('/', { hash: true });

  onMount(() => {
    router
      .on({
        '/': () => currentComponent = Home,
        '/about': () => currentComponent = About,
        '/contact': () => currentComponent = Contact
      })
      .resolve();
  });
</script>

<svelte:component this={currentComponent} />

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

Navigo поддерживает динамические сегменты в URL, что позволяет передавать параметры:

router.on('/profile/:id', ({ data }) => {
  currentComponent = Profile;
  userId = data.id;
});

В компоненте Profile.svelte можно использовать переданный параметр через реактивную переменную userId:

<script>
  export let userId;
</script>

<h1>Профиль пользователя {userId}</h1>

Навигация программно

Для изменения маршрута без перезагрузки страницы используется метод .navigate():

router.navigate('/about');

Это позволяет создавать кнопки или ссылки, которые управляют отображением компонентов:

<button on:click={() => router.navigate('/')}>Главная</button>
<button on:click={() => router.navigate('/contact')}>Контакты</button>

Использование хеш-маршрутизации vs history API

  • Hash-based routing (hash: true) – проще, не требует серверной конфигурации, URL выглядит как /#/about.
  • History API (hash: false) – чистый URL без хеша, например /about, но требует настройки сервера для корректного ответа на прямые переходы.

Выбор зависит от структуры приложения и серверной поддержки.

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

Navigo позволяет определять вложенные маршруты с использованием объектов:

router.on({
  '/dashboard': () => currentComponent = Dashboard,
  '/dashboard/settings': () => currentComponent = Settings
});

Можно также использовать функцию resolve() после изменения маршрутов для синхронизации:

router.updatePageLinks();
router.resolve();

Метод updatePageLinks() автоматически связывает все <a href> внутри приложения с Navigo.

Подключение параметров запроса

Navigo не обрабатывает query-параметры автоматически, но их можно получить из URL:

router.on('/search', () => {
  const params = new URLSearchParams(window.location.search);
  const query = params.get('q');
  currentComponent = Search;
  searchQuery = query;
});

В компоненте Search.svelte:

<script>
  export let searchQuery;
</script>

<h2>Результаты поиска по: {searchQuery}</h2>

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

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

router.on('/about', async () => {
  const module = await import('./routes/About.svelte');
  currentComponent = module.default;
});

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

Интеграция с состоянием приложения

Navigo легко сочетается с Svelte stores для глобального состояния:

import { writable } from 'svelte/store';

export const currentRoute = writable('/');

В роутере:

router.on({
  '/': () => currentRoute.set('/'),
  '/about': () => currentRoute.set('/about')
});

В компоненте:

<script>
  import { currentRoute } from './stores.js';
</script>

{#if $currentRoute === '/about'}
  <About />
{:else}
  <Home />
{/if}

Это создаёт реактивную связь между маршрутом и состоянием приложения, что удобно для сложных SPA.

Настройка 404 страницы

Чтобы обрабатывать неизвестные маршруты, используется метод .notFound():

import NotFound from './routes/NotFound.svelte';

router.notFound(() => currentComponent = NotFound);

Любой URL, не соответствующий определённым маршрутам, автоматически направит на компонент ошибки.

Заключение по архитектуре с Navigo в Svelte

Использование Navigo в сочетании с Svelte позволяет:

  • Структурировать SPA без лишних зависимостей.
  • Управлять динамическими и вложенными маршрутами.
  • Реализовывать ленивую загрузку компонентов.
  • Интегрироваться с реактивными переменными и глобальными хранилищами состояния.
  • Поддерживать как hash-based routing, так и чистые URL через History API.

Эта комбинация обеспечивает простую и гибкую архитектуру маршрутизации для любых проектов на Svelte.

Оглавление