第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY30-路由

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以下RouterLinkRoute三個元件進來,其中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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *