面试题：Qwik中如何使用[param]语法实现基础的动态路由

Question

请描述在Qwik项目中，怎样运用[param]语法定义一个简单的动态路由，比如用于展示不同用户详情页的路由。同时，说明如何在组件中获取这个动态参数。

Answer 1

1. 定义简单动态路由： 在Qwik项目中，使用[param]语法定义动态路由相对直观。假设我们要创建一个用于展示不同用户详情页的路由。在项目的路由目录（通常是routes目录）下，创建一个名为users/[userId].qwik的文件。这里的[userId]就是动态参数部分，userId可以根据实际需求命名，比如[userSlug]等，它代表了每个用户的唯一标识。例如：

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

export default component$(() => {
  const { userId } = useRouteParams();
  return (
    <div>
      <h1>User Details for User ID: {userId}</h1>
      {/* 这里可以根据userId获取用户详细信息并展示 */}
    </div>
  );
});

2. 在组件中获取动态参数： 在对应的组件（上述users/[userId].qwik中的组件）中，通过useRouteParams钩子函数来获取动态参数。如上述代码中，导入useRouteParams后，调用该函数并进行解构赋值，就可以轻松获取到动态路由中的参数。在这个例子里，解构出userId参数，后续就可以在组件中使用这个参数来进行数据获取、页面渲染等操作，例如通过userId从后端API获取特定用户的详细信息并展示在页面上。