（二）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. 返回主页链接：提供一个返回主页的链接，用户可以点击链接回到主页。

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

/contact/xxx/xx/xxx/xx
/contact/xxxx/yy/zz

那么我们就不能使用如上的方法了，我们需要使用 […slug] 来帮忙，如下文件结构：

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

我们看 /contact/[…slug] 就可以操作任何的路由嵌套，/contact/[…slug]/+page.svelte 代码如下：

<script>
    import { page } from '$app/stores';

    console.log($page.params.slug);
    const slgArr = $page.params.slug.split('/');
    
</script>
<div>
    dynamic contact page: {slgArr}

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

代码总结

这段 SvelteKit 代码用于创建一个动态的联系页面。页面会根据路由参数 slug 动态显示相关内容，并将 slug 参数按 / 分隔成数组，最后提供返回主页的链接。

逐行解释

<script>
    // 从 SvelteKit 应用商店中导入 page 对象
    import { page } from '$app/stores';

    // 在控制台中输出当前路由参数 slug 的值
    console.log($page.params.slug);

    // 将 slug 参数按 '/' 分隔成数组，并赋值给 slgArr 常量
    const slgArr = $page.params.slug.split('/');
</script>

1. 导入 page 模块：

• import { page } from '$app/stores';：从 SvelteKit 的 $app/stores 模块中导入 page 对象。page 对象包含当前页面的相关信息，如路由参数、查询参数等。

2. 日志输出路由参数：

• console.log($page.params.slug);：在控制台中输出当前路由参数 slug 的值，方便开发者调试。

3. 分割 slug 参数：

• const slgArr = $page.params.slug.split('/');：将 slug 参数按 / 分隔成数组，并赋值给 slgArr 常量。例如，如果 slug 的值是 foo/bar/baz，那么 slgArr 将是 ['foo', 'bar', 'baz']。

<div>
    <!-- 动态显示联系页面的 slgArr 数组 -->
    dynamic contact page: {slgArr}

    <!-- 提供一个返回主页的链接 -->
    <a href="/">Home page</a>
</div>

4. HTML 结构：

• <div>：定义一个 div 容器。
• dynamic contact page: {slgArr}：在容器内动态显示 slgArr 数组。通过 {slgArr} 绑定机制插入 slgArr 变量的值。
• <a href="/">Home page</a>：提供一个链接，点击链接返回主页。

（3）goto 页面切换

这段代码是一个基本的 Svelte 应用程序，用于展示一个简单的首页，其中包含一个链接和一个按钮，用于导航到关于页面。

代码总结

该代码包含以下几个部分：

1. JavaScript 部分（<script> 标签内）：

• 导入了 goto 函数，该函数来自于 Svelte 应用的导航模块 "$app/navigation"。这个函数用于在单页面应用中进行页面导航。
• 定义了一个名为 handleClick 的函数，该函数在按钮被点击时被调用。函数输出一条日志到控制台，并调用 goto 函数来导航到 /about 页面。

2. HTML 部分：

• 在 <div> 元素内包含了一段简单的文本 “This is a Home page.”，用于显示首页的内容。
• 包含一个 <a> 元素，该元素是一个超链接，其 href 属性指向 /about，用户可以点击这个链接直接导航到关于页面。
• 包含一个 <button> 元素，当用户点击这个按钮时会触发 handleClick 函数，从而实现通过编程方式导航到关于页面。

逐行解释

<script> 部分

<script>
    import { goto } from "$app/navigation";
    const handleClick = () => {
        console.log("handleClick about page");
        goto("/about");
    };
</script>

• import { goto } from "$app/navigation";：导入了 Svelte 应用中用于导航的 goto 函数，它允许在单页面应用中进行页面跳转。
• const handleClick = () => { ... }：定义了一个名为 handleClick 的箭头函数。当按钮被点击时，此函数会被调用。
• console.log("handleClick about page");：输出一条日志到控制台，内容为 “handleClick about page”，用于在点击按钮时进行调试或记录。
• goto("/about");：调用 goto 函数，将应用程序导航到 /about 页面。

HTML 部分

<div>
    This is a Home page.

    <a href="/about"> about page</a>
    <button on:click={handleClick}>Go to About page</button>
</div>

• <div> 元素包裹了页面的内容。
• "This is a Home page."：简单的文本内容，用于展示在页面上。
• <a href="/about"> about page</a>：一个超链接，点击这个链接会直接导航到 /about 页面。这是一个普通的 HTML 超链接。
• <button on:click={handleClick}>Go to About page</button>：一个按钮元素，当点击这个按钮时会触发 handleClick 函数。通过 JavaScript 编程方式实现了跳转到关于页面的功能。

总结

这段代码演示了如何在 Svelte 应用中处理页面导航的几种方式：通过普通的 HTML 超链接直接导航，以及通过 JavaScript 函数调用来实现编程式导航。