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，用来判断某个路径是否处于激活状态
