（二）SvelteKit教程：pages 和routes

（二）SvelteKit教程：pages 和routes

分三种路由：

（1）一般的路由

可以直接在 routes 文件夹下面新建一个文件夹，然后在里面新建一个 +page.svelte 文件，就可以了，文件结构如下，内部内容跟 routes/+page.svelte 的内容一致，我们创建的路由是 /about 和 /contact

routes
├── +page.svelte
├── about
│   ├── +page.svelte
└── contact
    └── +page.svelte

如果你要设置二级目录，比如 /about/first 和 /about/second 那么你就可以直接在 about 文件夹下面创建一个 first 文件夹和 second 文件夹，这样就可以创建二级目录了，这个就非常简单易懂。

（2）嵌套动态路由

这个路由分为两种：

第一种：子路由的嵌套，比如我们要设计一个 /about/xxx 其中 xxx可以是任意内容，那么我们就不能按照第一种方式来操作，这样你遍历写代码太痛苦了。我们可以用一个动态ID 来进行参数设置。比如，我们可以得到如下的文件结构。其中 [aboutID] 就是代表的 /about 路由下面的所有二级路由，这个是跟第一种路由方式的最大区别。

routes
├── +page.svelte
├── about
│   ├── +page.svelte
│   └── [aboutID]
│       └── +page.svelte
└── contact
    └── +page.svelte

我们来看 [aboutID]/+page.svelte 里面的代码如下：

<script>
    import {
    page } from '$app/stores';
    const aboutID = $page.params.aboutID;
</script>
<div>
    dynamic about page: {
   aboutID}

    <a href="/">Home page</a>
</div>

这段 SvelteKit 代码用于创建一个动态的关于页面。页面会根据路由参数 aboutID 动态显示相关内容，并提供返回主页的链接。

1. 导入 page 模块：从 $app/stores 中导入 page 对象。
2. 获取路由参数：从 page.params 中获取 aboutID 参数，并将其赋值给 aboutID 常量。
3. 动态显示内容：在 HTML 中动态显示 aboutID 的值，生成一个根据路由参数变化的关于页面。
4. 返回主页链接：提供一个返回主页的链接，用户可以点击链接回到主页。

如果你还想匹配如下这种随机的长度的路由ÿ