Svelte 迷途求索（四） —— 路由的兩種解決方案

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，用來判斷某個路徑是否處於激活狀態