Svelte 沒有提供官方的路由工具,這恰好促進了 router 的百家爭鳴
目前有三個 svelte router 項目獲得更多開發者的認同:svelte-spa-router、routify、svelte-routing
其中 svelte-routing 是服務端渲染(SSR)解決方案,這裏先不做介紹,主要介紹另外兩個 router 工具
1. Svelte Spa Router
首先在項目中安裝依賴
npm install svelte-spa-router
然後創建路由配置文件 routes.ts
import Home from './views/Home.svelte';
import About from './views/About.svelte';
import Detail from './views/Detail.svelte';
const routes = {
'/': Home,
'/home': Home,
'/about/*': About,
'/detail/:type/:id': Detail,
}
export default routes;
在 App.svelte 中引入
<script lang="ts">
import Router from 'svelte-spa-router';
import routes from './routes';
</script>
<main>
<Router {routes} />
</main>
可以看到,svelte-spa-router 需要一個 routes 對象,對象的 key 代表路由規則,value 則是對應的頁面組件
需要注意的是,其實所有的路由地址都有一個隱藏的前綴 #
1.1 路由規則
關於路由規則,除了基本的絕對路徑 /path-a/path-b/path-c 之外,還有通配符 * 和動態路由 :
比如上面的 /about/* 就用到了通配符, /about/ 後面可以是任意層級的地址
路由地址 /#/about/a 、 /#/about/b/c/d 都能夠訪問到 About 組件,但 /#/about 不行
而 /detail/:type/:id 用到了動態路由,這裏的 type 和 id 可以是任意字符串,但路由的層級不能多也不能少
路由地址 /#/detail/foo/123 和 /#/detail/bar/234 都能訪問到 Detail 組件,但 /#/detail/123 或者 /#/detail/foo/bar/123 不行
不過如果最後一個動態路由後面加了 ? ,則是一個可選的動態路由
比如路由規則 /detail/:type/:id? 就能匹配 /#/detail/foo/123 和 /#/detail/foo
1.2 路由參數
對於動態路由,如果在組件中以 props 的形式導出了一個 params,就可以拿到具體的動態路由參數
比如通過 /#/detail/foo/123 訪問 Detail 組件
如果路由上還攜帶有 query 參數(比如:/#/detail/foo/123?name=wise&blog=cnblogs)
可以通過 svelte-spa-router 提供的 querystring 拿到
1.3 頁面跳轉
svelte-spa-router 提供了 link 方法,可以配 <a /> 標籤實現路由跳轉
<script>
import { link } from 'svelte-spa-router';
const path = '/about/wise';
</script>
<a use:link={path}>To About Page</a>
如果想將跳轉的邏輯放到函數中(比如提交表單後跳轉頁面)可以使用 push 或 replace
<script>
import {push, replace} from 'svelte-spa-router'
const toAboutPage = () => {
push('/about/wise');
// or
// replace('/about/wise');
}
</script>
<button on:click={toAboutPage}>To About Page</button>
2. Routify
上面介紹的 svelte-spa-router 需要創建一個路由規則的配置文件
而 routify 是約定式路由解決方案,無需配置路由規則,直接根據目錄結構生成路由
我們可以在已經創建好的項目中引入 routify,具體步驟參考官方說明
不過實際體驗比較彆扭,如果想嘗試 routify,最好實用配套的項目模板 routify-starter
$ mkdir my-routify-app $ cd my-routify-app $ npx @roxi/routify init
$ npm install
$ npm run dev
routify 會根據 src/pages 目錄下的結構來生成路由規則,緩存到根目錄下的 .routify 目錄
所以在 App.svelte 中這樣配置即可:
<script>
import { Router } from "@roxi/routify";
import { routes } from "../.routify/routes";
</script>
<Router {routes} />
2.1 約定目錄
在 Routify 中,src/pages 下的文件路徑會映射爲路由地址
不同於 svelte-spa-router,routify 生成路由不需要 # 作爲前綴
但有幾個特殊規則:
a. index.svelte 會映射爲 / 和 /index
b. 用中括號包起來的文件名 [id] 會被視爲動態參數(參考上面的 1.2)
c. 下換線開頭的文件會被忽略
d. _layout.svelte 會被視作當前目錄的根節點,且內部必須含有 <slot />,用於渲染子組件
2.2 獲取參數
在頁面中,可以通過 props 接收動態參數
比如在 src/pages/blog/[id].svelte 文件中:
或者通過 routify 提供的 params 對象來訪問
2.3 頁面跳轉
可以使用內置的 url 方法,配合 <a /> 實現路由跳轉
$url 的參數可以是一個具體的地址,也可以是一個相對路徑,詳情可以參考這裏
如果需要在函數中跳轉頁面,可以用 $goto
routify 還提供了一個很好用的工具函數 $isActive,用來判斷某個路徑是否處於激活狀態