Как использовать роутинг в Svelte?

@yasmine 

@yasmine 

Для создания роутинга в Svelte можно использовать библиотеку Routify или реализовать роутинг вручную. Вот пример реализации роутинга вручную:

1. Создайте компоненты для каждой страницы вашего приложения, например Home.svelte и About.svelte.
2. Создайте файл Router.svelte, который будет отвечать за управление роутингом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script>
    import { onMount } from 'svelte';

    export let routes = {
        '/': Home,
        '/about': About,
    };

    let currentRoute = window.location.pathname;

    const goToRoute = (route) => {
        window.history.pushState({}, route, route);
        currentRoute = route;
    };

    onMount(() => {
        window.onpopstate = () => {
            currentRoute = window.location.pathname;
        };
    });

</script>

{#if routes[currentRoute]}
    <svelte:component this={routes[currentRoute]} />
{:else}
    <h1>Page not found!</h1>
{/if}

1. В каждом компоненте (например, Home.svelte и About.svelte) добавьте ссылки для перехода между страницами:

1
2

<a href="/" on:click|preventDefault={() => $Router.goToRoute('/')}>Home</a>
<a href="/about" on:click|preventDefault={() => $Router.goToRoute('/about')}>About</a>

1. Добавьте Router.svelte в корневую компоненту вашего приложения и используйте его для управления роутингом.

Теперь у вас будет базовая реализация роутинга в Svelte. Не забудьте добавить дополнительную логику, такую как обработку параметров в путях или защиту маршрутов. Если вам требуется более сложный и гибкий роутинг, рекомендуется использовать библиотеки, такие как Routify или Svelte Router.