Svelteで複数のページを管理する ~SPA~

概要

最近触ったSvelteで複数のページを管理したいときはどうすればいいのか調べて理解したことをまとめてみました

「SPA」=「Single Page Application」を最近知りました😇

準備

spaの実装に必要なライブラリをインストールします

npm install svelte-spa-router

作るもの

spaの実装の仕方を理解するためにごく簡単なものを作ります

トップページ

helloの部分をクリックすると

「Hello,」のみが表示されてパスが「/」→「/#/hello」に変わる

実装 ~コンポーネント~

コンポーネントで意識するのは

• svelte-spa-routerのpushをimportして
• 画面遷移をさせたいイベントでpushを呼び出す
• pushの引数には遷移時のパス（「/#/hello」の「/hello」にあたる部分）を指定する

作るコンポーネントは

• Hello：「Hello,」を表示
• Svelte：「Svelte！」を表示
• Home：「Hello, Svelte!」を表示（HelloとSvelteコンポーネントの表示）

Hello.svelte

<script>
    import { push } from 'svelte-spa-router'
</script>

<div on:click={() => push('/hello')}>Hello,</div>

Svelte.svelte

<script>
    import { push } from 'svelte-spa-router'
</script>

<div on:click={() => push('/svelte')}>Svelte !</div>

Home.svelte

<script>
    import Hello from "./Hello.svelte";
    import Svelte from "./Svelte.svelte";
</script>

<Hello/><Svelte/>

実装 ~ルーティング~

ルーティングはApp.svelteで実装してみます

実装ポイントは

• パスとコンポーネントのmapを作成し（ここでいうroutes）
• Routerタグにroutesプロパティとして引き渡す

App.svelte

<script>
    import Router from 'svelte-spa-router'
    import Home from "./components/Home.svelte";
    import Hello from "./components/Hello.svelte";
    import Svelte from "./components/Svelte.svelte";

    const routes = {
        '/': Home,
        '/hello': Hello,
        '/svelte': Svelte,
        '*': Home
    };
</script>

<Router routes={routes}/>

これで完成！！！🙌 🙌 🙌