面试题：Qwik中[param]语法在动态路由匹配中的基础应用

Question

在Qwik项目中，假设你要创建一个动态路由，用于展示不同用户的个人信息页面，用户ID作为动态参数。请描述如何使用[param]语法来定义这个动态路由，并在组件中获取该用户ID。

Answer 1

1. 定义动态路由： 在Qwik项目中，通常在routes目录下定义路由。假设项目结构如下：

src/
└── routes/
    └── users/
        └── [id].qwik

在[id].qwik文件中，通过[param]语法定义动态路由，这里[id]就是动态参数，表示用户ID。这个文件将处理展示特定用户个人信息的逻辑。

2. 在组件中获取用户ID： 在[id].qwik组件中，可以通过useRouteParams钩子函数来获取动态路由参数。示例代码如下：

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

export default component$(() => {
    const { id } = useRouteParams();
    return (
        <div>
            <p>用户ID: {id}</p>
            {/* 这里可以根据id去获取用户个人信息并展示 */}
        </div>
    );
});

在上述代码中，useRouteParams返回一个包含所有路由参数的对象，通过解构可以提取出id参数，也就是用户ID，后续可以利用这个ID从数据库或API中获取对应的用户个人信息并展示在页面上。