面试题：Qwik文件系统路由的基础配置问题

Question

在Qwik项目中，简述如何通过文件系统路由创建一个简单的页面路由结构，例如有首页、关于页和联系页。请说明相关文件的创建和目录结构安排。

Answer 1

1. 目录结构：
   • 在项目根目录下，通常有一个 src 目录。在 src/routes 目录下构建页面路由结构。
2. 创建相关文件：
   • 首页：
     • 在 src/routes 目录下创建一个 index.tsx 文件。这个文件将代表首页。例如：

import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
    return <div>这是首页</div>;
});

• 关于页：
  • 在 src/routes 目录下创建一个 about.tsx 文件。内容类似：

import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
    return <div>这是关于页</div>;
});

• 联系页：
  • 在 src/routes 目录下创建一个 contact.tsx 文件。示例代码如下：

import { component$, useStore } from '@builder.io/qwik';

export default component$(() => {
    return <div>这是联系页</div>;
});

通过这种基于文件系统的路由方式，Qwik 会根据 src/routes 目录下的文件自动生成相应的页面路由，index.tsx 对应首页，about.tsx 对应 /about 路径的关于页，contact.tsx 对应 /contact 路径的联系页。