路由(Routing)

路由是一种将站点的公共URL 映射到代码中声明的特定组件的方法。

Qwik City 使用基于目录的路由。这意味着您的routes目录的结构驱动了用户将看到的面向公众的URL。它与传统的基于文件的路由略有不同，我们将在稍后讨论。

基于目录的路由

Qwik City 支持下面的文件类型作为路由。

在routes目录下，folder-path加上一个index文件，会映射一个URL路径。

下面例子里，如果用户输入https://example.com/some/path，则看到的是src/routes/some/path/index（可以是.mdx 或者 .tsx）这个组件。

src/
└── routes/
    └── some/
        └── path/
            └── index.tsx       # https://example.com/some/path

请注意，路由末尾的叶子文件名为index.html。这个很重要。在您可能熟悉的其他元框架中，“pages”和“data endpoints”或“API routes”之间存在区别。在Qwik City，没有区别，都是endpoints。

要定义endpoint，您必须定义一个 index.[filetype] 其中 [filetype] 可以是 .ts、.tsx、.js、.jsx、.md 或.mdx。

而下面的目录结构：

src/
└── routes/
    ├── contact.tsx
    ├── about.tsx
    ├── store.tsx
    └── index.tsx

可能在其他使用基于文件的路由的元框架中工作， Qwik City 不会为任何非index文件注册路由。在 Qwik City 中，等效的文件结构应该像下面这样写:

src/
└── routes/
    ├── contact/
    │   └── index.tsx          # https://example.com/contact
    ├── about/
    │   └── index.tsx          # https://example.com/about
    ├── store/
    │   └── index.tsx          # https://example.com/store
    └── index/
        └── index.tsx          # https://example.com/index

起初，这似乎是额外的工作，但这种方法有一些优点。一个优点是能够在路由目录中定义组件文件而无需渲染它们。考虑以下例子：

src/
└── routes/
    ├── index.tsx                     # https://example.com/
    └── some/
        ├── index.tsx                 # https://example.com/some
        └── path/
            ├── index.tsx             # https://example.com/some/path
            └── other_component.tsx   # this file is ignored and not mapped to any URL because it is not an index.

这个other_component.tsx可以被path/index.tsx导入使用，但却是Qwik City（注册路由表）所忽略的文件。

实现一个组件

要返回特定路由的 HTML，您需要实现一个组件。对于 .tsx 文件，组件必须导出为 default。或者，您可以使用稍后会讨论的 .mdx 扩展名。

export default component$(() => {
  return <H1>Hello World!</H1>;
});

`@qwik-city-plan`

Qwik City 将路由信息存储在磁盘上的文件中。这对于开发人员的开发效率非常有用，但对于创建bundles和chunks没有用。此外，在某些环境中——例如边缘函数——没有可以访问的文件系统。为此，有必要将路由信息序列化到单独的文件中。这是通过import @qwik-city-plan 完成的。

import cityPlan from '@qwik-city-plan';

@qwik-city-plan 导入是合成的，这意味着它是作为构建步骤的一部分创建的。它包含/src/routes 文件夹中的所有信息(它使用js格式)。 The synthetic import is provided by the qwikCity() vite plugin available from @builder.io/qwik-city/vite.

高级路由

Qwik City 也支持:

这些在后面讨论。