Astro的Catch-All路由是什么

深入了解Astro的catch-all路由机制，学习如何使用剩余参数创建动态路由，处理复杂的URL结构和内容集合。

Jun 19, 2024· tutorials· 6 min read

什么是 Catch-All 路由？

在 Astro 中，catch-all 路由机制是指使用剩余参数（rest parameters）来创建动态路由，这种路由能够捕获 URL 中所有剩余的路径片段。这种机制非常灵活，特别适用于处理包含斜杠的复杂 URL 结构。

基本概念

Astro 中的任何位于 src/pages/ 目录下的页面文件都会创建对应的路由。当文件名包含参数时，一个路由可以动态地创建多个页面。

Catch-all 路由通过在文件名中使用 [...param] 语法来定义，例如：

src/pages/blog/[...slug].astro

这个 [...slug] 参数会捕获 URL 中与该部分匹配的所有内容，包括斜杠，并将其作为一个单一的字符串值提供给页面。

示例说明

如果你有一个文件路径为 src/pages/posts/[...slug].astro：

访问 /posts/hello-world，slug 参数的值将是 "hello-world"
访问 /posts/2023/my-first-post，slug 参数的值将是 "2023/my-first-post"

这种能力使得 Astro 能够处理具有复杂或嵌套 URL 结构的内容。

Catch-All 路由的用途和实现

1. 静态生成中的应用

当你的网站是静态输出（Astro 的默认行为）时，可以使用 getStaticPaths() 函数在构建时从单个 .astro 页面组件生成多个预渲染的页面路由。

如果你的自定义 slug 包含斜杠以生成具有多个路径段的 URL，你必须在动态路由页面中使用剩余参数作为 .astro 文件名。

示例代码（src/pages/posts/[...slug].astro）：

---
import { getCollection, render } from "astro:content";

export async function getStaticPaths() {
  // 假设你的内容集合中有一个 slug 包含斜杠，例如 "category/post-title"
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.id }, // 如果post.id是 "category/post-title"
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
---

<html>
  <head>
    <title>{post.data.title}</title>
  </head>
  <body>
    <h1>{post.data.title}</h1>
    <Content />
  </body>
</html>

在这个例子中，如果 src/blog/category/my-post.md 的 id 是 category/my-post，那么生成的 URL 将是 /posts/category/my-post/。[...slug] 参数会捕获 category/my-post 作为 Astro.params.slug 的值。

2. 服务端渲染（SSR）中的应用

如果你的网站是动态网站（使用 Astro 的 SSR 支持），你不需要在构建时提前生成任何路径。相反，你的页面应该在按需渲染时检查请求，然后使用 getEntry() 获取正确的内容条目。

示例代码（SSR 模式下的 src/pages/posts/[...slug].astro）：

---
import { getEntry, render } from "astro:content";

// 1. 从传入的服务器请求中获取 slug
const { slug } = Astro.params;
if (slug === undefined) {
  return Astro.redirect("/404");
}

// slug 将是一个数组，因为它是 [...slug]
const fullPath = Array.isArray(slug) ? slug.join("/") : slug;

// 2. 直接使用请求 slug 查询条目
const post = await getEntry("blog", fullPath);

// 3. 如果条目不存在则重定向
if (post === undefined) {
  return Astro.redirect("/404");
}

// 4. 在模板中将条目渲染为 HTML
const { Content } = await render(post);
---

<html>
  <head>
    <title>{post.data.title}</title>
  </head>
  <body>
    <h1>{post.data.title}</h1>
    <Content />
  </body>
</html>

重要提示： 在 SSR 模式下，对于 [...slug] 这样的剩余参数，Astro.params.slug 将是一个字符串数组，其中每个元素代表 URL 路径的一个段（不包括开头的 / 和末尾的 /）。

例如，对于 /posts/2023/my-first-post，Astro.params.slug 将是 ["2023", "my-first-post"]。因此，在查询内容集合时，你需要将这个数组使用 join('/') 拼接成完整的 slug 字符串。

3. 分页中的 Catch-All 路由

paginate() 函数也可以与 catch-all 路由结合使用，例如 [...page].astro。

区别说明：

paginate() 假设文件名为 [page].astro 或 [...page].astro
[page].astro 将生成 /posts/1、/posts/2、/posts/3 等 URL
[...page].astro 将生成 /posts、/posts/2、/posts/3 等 URL

这种模式允许你为网站的主页（例如博客文章列表的首页）使用一个更简洁的 URL，而不需要显式地显示 /1。

实际应用场景

1. 嵌套内容路径

处理来自内容集合的嵌套内容路径，其中 slug 可能包含斜杠：

content/
├── blog/
│   ├── frontend/
│   │   └── react-basics.md      // slug: "frontend/react-basics"
│   └── backend/
│       └── node-fundamentals.md // slug: "backend/node-fundamentals"

2. 灵活的分页

实现灵活的分页，例如让第一页的 URL 不包含页码。

3. 复杂 URL 结构

构建需要根据复杂 URL 结构按需获取数据的服务端渲染页面。

总结

Catch-all 路由机制是 Astro 动态路由的一个强大特性，它允许开发者创建能够匹配并捕获 URL 中所有剩余路径段的路由。

核心要点：

使用 [...param] 语法在文件名中定义 catch-all 路由
静态生成时配合 getStaticPaths() 使用
SSR 模式下配合 Astro.params 使用
特别适用于处理包含斜杠的复杂 URL 结构
可以与分页功能结合使用

通过合理使用 catch-all 路由，你可以构建更加灵活和强大的 Astro 应用。

astro web-development frontend tutorial