面试题：Qwik中多级路由如何配置基础结构

Question

在Qwik项目中，假设要实现一个简单的三级路由结构，首页为一级路由，首页下有两个二级路由，每个二级路由下又分别有两个三级路由。请描述如何在Qwik中配置这样的多级路由基础结构，包括相关文件和关键代码片段。

Answer 1

1. 文件结构：
   • 在Qwik项目中，路由通常基于文件系统结构。假设项目根目录为src/routes。
   • 首页（一级路由）：在src/routes/index.tsx。
   • 二级路由：在src/routes/route1和src/routes/route2目录下分别创建index.tsx文件。
   • 三级路由：在src/routes/route1/route1 - sub1和src/routes/route1/route1 - sub2目录下分别创建index.tsx文件；在src/routes/route2/route2 - sub1和src/routes/route2/route2 - sub2目录下分别创建index.tsx文件。
2. 关键代码片段：
   • 首页（src/routes/index.tsx）：

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

export default component$(() => {
    const route = useRoute();
    return (
        <div>
            <h1>首页</h1>
            <ul>
                <li><a href="/route1">二级路由1</a></li>
                <li><a href="/route2">二级路由2</a></li>
            </ul>
        </div>
    );
});

• 二级路由1（src/routes/route1/index.tsx）：

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

export default component$(() => {
    const route = useRoute();
    return (
        <div>
            <h1>二级路由1</h1>
            <ul>
                <li><a href="/route1/route1 - sub1">三级路由1 - 1</a></li>
                <li><a href="/route1/route1 - sub2">三级路由1 - 2</a></li>
            </ul>
        </div>
    );
});

• 二级路由2（src/routes/route2/index.tsx）：

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

export default component$(() => {
    const route = useRoute();
    return (
        <div>
            <h1>二级路由2</h1>
            <ul>
                <li><a href="/route2/route2 - sub1">三级路由2 - 1</a></li>
                <li><a href="/route2/route2 - sub2">三级路由2 - 2</a></li>
            </ul>
        </div>
    );
});

• 三级路由1 - 1（src/routes/route1/route1 - sub1/index.tsx）：

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

export default component$(() => {
    const route = useRoute();
    return (
        <div>
            <h1>三级路由1 - 1</h1>
        </div>
    );
});

• 三级路由1 - 2（src/routes/route1/route1 - sub2/index.tsx）：

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

export default component$(() => {
    const route = useRoute();
    return (
        <div>
            <h1>三级路由1 - 2</h1>
        </div>
    );
});

• 三级路由2 - 1（src/routes/route2/route2 - sub1/index.tsx）：

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

export default component$(() => {
    const route = useRoute();
    return (
        <div>
            <h1>三级路由2 - 1</h1>
        </div>
    );
});

• 三级路由2 - 2（src/routes/route2/route2 - sub2/index.tsx）：

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

export default component$(() => {
    const route = useRoute();
    return (
        <div>
            <h1>三级路由2 - 2</h1>
        </div>
    );
});

通过上述文件结构和代码片段，就可以在Qwik项目中实现简单的三级路由结构。