面试题：Qwik文件系统路由中的常见参数设置及作用

Question

在Qwik的文件系统路由中，有哪些常见的参数可以设置，比如动态路由参数等，它们各自的作用是什么，请举例说明。

Answer 1

在Qwik的文件系统路由中常见参数及作用如下：

1. 动态路由参数
   • 作用：用于匹配动态部分的URL，使得同一页面组件可以处理不同具体路径下的请求，实现数据的个性化展示。
   • 举例：假设在routes目录下创建一个文件users/[id].qwik，这里[id]就是动态路由参数。当访问/users/123时，组件可以通过获取id为123，来展示用户ID为123的具体信息。在组件内部可以通过useRouteParams钩子函数获取参数值，示例代码如下：

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

export default component$(() => {
  const params = useRouteParams();
  const userId = params.get('id');
  return <div>User ID: {userId}</div>;
});

2. 嵌套路由参数
   • 作用：用于处理多层级的动态路由结构，使应用可以更好地组织和管理复杂的页面层次关系。
   • 举例：比如在routes目录下有products/[productId]/variants/[variantId].qwik。这里[productId]和[variantId]就是嵌套的动态路由参数。访问/products/456/variants/789时，组件可以获取到productId为456以及variantId为789，从而展示特定产品的特定变体信息。同样可以使用useRouteParams获取参数，代码类似：

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

export default component$(() => {
  const params = useRouteParams();
  const productId = params.get('productId');
  const variantId = params.get('variantId');
  return (
    <div>
      Product ID: {productId}, Variant ID: {variantId}
    </div>
  );
});

3. 可选参数
   • 作用：使路由中的某部分参数是可选的，增加路由匹配的灵活性。
   • 举例：例如在routes目录下创建posts/[slug]?[page].qwik，其中[page]是可选参数。当访问/posts/hello-world时，page参数不存在；而访问/posts/hello-world?page=2时，可以获取到page参数值为2。在组件中获取参数方式如下：

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

export default component$(() => {
  const params = useRouteParams();
  const slug = params.get('slug');
  const page = params.get('page') || '1';
  return (
    <div>
      Post Slug: {slug}, Page: {page}
    </div>
  );
});