routing

routing 路由是第三十天要分享給大家的 svelte 文章，不過這個套件不是官方用法， svelte 的官方用法是 sapper 這個框架不過筆者沒實際用過，待之後使用過再分享給大家。所以接下來先跟大家介紹一下svelte-routing這個套件。

本文同步放置於此

routing 是做甚麼用的

路由是做甚麼用的，簡單講就是將你導到你要到的地方，相信有看過筆者之前的flask rest routing的文章就是一個server side的路由簡單說明就是透過url上的規則指定到哪一個類別或是資源，過這跟今天要說明的svelte-routing有甚麼關係呢，簡單來說就是flask rest routing是伺服器端的路由，svelte-routing則是client端的路由。

routing 怎麼用

簡單做個簡介之後就要開始介紹svelte-routing怎麼使用了。當然請大家看看下面的範例了。這個範例來自於svelte-routing筆者就直接介紹了，有需要的人可以直接抓取使用。又或者是先創建一個專案再透過npm安裝套件也可以。

<!-- App.svelte -->
<script>
  import { Router, Link, Route } from "svelte-routing";
  import { Home, About, Blog, BlogPost } from "./routes";

  export let url = "";
</script>

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

簡單說明一下主要就是import以下Router'Link、Route三個元件進來，其中Link會轉換成href的html標籤，而且會把to後面的參數對應到Route的元件，最後Router是放置Route的容器。所以svelte-routing主要就是由這三個元件組成，相信眼尖的讀者們應該會想說blog/:id這是甚麼，沒錯，這個:id就是路由的參數，接下來就可以看一下下面這個BlogPost元件。

<script>
  export let id;
</script>

<h1>BlogPost</h1>
<p>Id is {id}</p>

這裡路由會把參數直接餵到你的元件內，這是不是很方便呢。

小結

這第三十天介紹一個svelte-routing給大家認識一下，透過這套件可以讓你的svelte有一個簡單的html路由，之後有機會再跟大家分享sapper套件，還請大家繼續關注我的部落格develop-note