Svelte – это популярная платформа JavaScript, используемая для создания интерактивных веб-приложений. Хотя сам Svelte не предоставляет встроенного решения для маршрутизации, существует несколько методов и библиотек для реализации маршрутизации в приложениях Svelte. В этой статье мы рассмотрим различные подходы к реализации маршрутизации в Svelte, а также приведем примеры кода.

Метод 1: маршрутизация вручную

Один простой метод — реализовать маршрутизацию вручную, отслеживая текущий маршрут и отображая соответствующие компоненты на основе маршрута. Вот пример:

// App.svelte
<script>
  import { onMount } from 'svelte';
  let route = '';
  const navigate = (newRoute) => {
    route = newRoute;
  };
  onMount(() => {
    // Initial route setup
    const initialRoute = window.location.pathname;
    navigate(initialRoute);
  });
</script>
<nav>
  <a href="/" on:click={() => navigate('/')}>Home</a>
  <a href="/about" on:click={() => navigate('/about')}>About</a>
  <a href="/contact" on:click={() => navigate('/contact')}>Contact</a>
</nav>
<main>
  {#if route === '/'}
    <Home />
  {:else if route === '/about'}
    <About />
  {:else if route === '/contact'}
    <Contact />
  {:else}
    <NotFound />
  {/if}
</main>

Метод 2: маршрутизатор Svelte SPA

Svelte SPA Router — это библиотека, предоставляющая декларативный способ управления маршрутизацией в приложениях Svelte. Он предлагает такие функции, как вложенные маршруты, параметры маршрута и защиту маршрута. Вот пример использования Svelte SPA Router:

# Install Svelte SPA Router
npm install --save-dev svelte-spa-router

// App.svelte
<script>
  import { Router, Link, Route } from 'svelte-spa-router';
  import Home from './routes/Home.svelte';
  import About from './routes/About.svelte';
  import Contact from './routes/Contact.svelte';
  import NotFound from './routes/NotFound.svelte';
</script>
<nav>
  <Link to="/">Home</Link>
  <Link to="/about">About</Link>
  <Link to="/contact">Contact</Link>
</nav>
<main>
  <Router>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
    <Route path="*" component={NotFound} />
  </Router>
</main>

Метод 3: маршрутизация

Routify — это мощная платформа маршрутизации для приложений Svelte. Он предоставляет расширенные функции, такие как автоматическое разделение кода, предварительная загрузка и рендеринг на стороне сервера. Вот пример использования Routify:

# Install Routify
npm install --save-dev @roxi/routify

// App.svelte
<script>
  import { Router, Link, Route } from '@roxi/routify';
  import Home from './routes/Home.svelte';
  import About from './routes/About.svelte';
  import Contact from './routes/Contact.svelte';
  import NotFound from './routes/NotFound.svelte';
</script>
<nav>
  <Link to="/">Home</Link>
  <Link to="/about">About</Link>
  <Link to="/contact">Contact</Link>
</nav>
<main>
  <Router>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
    <Route path="*" component={NotFound} />
  </Router>
</main>

В этой статье мы рассмотрели три различных метода реализации маршрутизации в приложениях Svelte. Ручная маршрутизация подходит для простых проектов, а такие библиотеки, как Svelte SPA Router и Routify, предлагают более продвинутые функции для сложных приложений. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните создавать динамические одностраничные приложения с помощью Svelte!