Svelte + Vite環境で、svelte-routingを使い、パスルーティングを実装する

はじめに

svelteJSを使ってアプリケーションを構築しており、
routingの実装をsvelte-routingで実装したのでその時のメモ。

使ったもの

• Vite + Svelte + Typescript
  • svelte-routing

前提

Dockerベースイメージnode:18-alpine3.15で構築

導入

1. Vite + Svelte環境構築

   $ npm init vite@latest
   ✔ Project name: … <任意の名前>
   ✔ Select a framework: › Svelte
   ✔ Select a variant: › TypeScript
   
   $ npm install
   

2. vite.config.tsを修正

   import { defineConfig } from 'vite'
   import { svelte } from '@sveltejs/vite-plugin-svelte'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [svelte()],
     server: {       // 追加
       host: true,   // 追加
       port: 8080    // 追加
     }               // 追加
   })
   
   

3. サーバー起動

   $ npm run dev
   

   これでlocalhost:8080で環境が開けるはず

   

   こんな画面

4. svelte-routingのインストール

   $ npm install --save svelte-routing
   

svelte-routingの使い方

<script lang="ts">
  import { Router, Link, Route } from "svelte-routing";  // svelte-routingの読み込み
</script>

<Router>
  <nav>
    <Link to="home">Home</Link>
    <Link to="about">About</Link>
  </nav>
  <div>
    <Route path="home"><Home /></Route>
    <Route path="blog" component="{Blog}" />
  </div>
</Router>

• Routerコンポーネントの中でLinkやRouteを書いていきます。

Link

• イメージとしては<a href="">みたいな感じ
• クリック後、to=""で指定した先に遷移します。
• 基本的にto="about"と書くと現在のパスに追加でパスが増えていく。(同じRouterコンポーネント内では置き換わる)
• to="/page/about"のように絶対パスで指定することも可能
• また、to="../about"のように相対パスでもかける

// http://localhost/home

<Link to="about">About</Link>
// ⇒ http://localhost/home/about

<Link to="/about">About</Link>
// ⇒ http://localhost/about

<Link to="../about">About</Link>
// ⇒ http://localhost/about

Route

• 該当パスの時の表示コンポーネントを指定
• コンポーネントが指定されていないときは子の要素がレンダリングされる

<script lang="ts">
  import About from "./About.svelte";
  import Blog from "./Blog.svelte";
</script>

<Route path="about" component="{About}" />
<Route path="blog">
  <Blog />
</Route>
<Route path="/">
  <h3>メニューを選択してください。</h3>
</Route>

その他

navigateなども用意されており、ログイン後の遷移なども行えて便利そうです。

<script>
  import { navigate } from "svelte-routing";

  function onSubmit() {
    login().then(() => {
      navigate("/success");
    });
  }
</script>

それぞれいろいろなPropertiesが用意されているのでいろいろ使ってみたいです。