面试题：Qwik动态路由在电商项目商品分类展示中的应用

路由配置：
- 在Qwik项目中，利用Qwik的路由约定。例如，在src/routes目录下创建商品分类相关的路由文件结构。可以创建一个类似src/routes/products/[category].qwik的文件。这里[category]是动态路由参数，它代表不同的商品分类。
- 当用户访问例如/products/electronics这样的URL时，Qwik会匹配到src/routes/products/[category].qwik这个路由文件。

参数传递：

在上述路由文件src/routes/products/[category].qwik中，Qwik会自动将URL中的category参数传递进来。可以通过useRoute钩子函数获取这个参数。示例代码如下：

import { component$, useRoute } from '@builder.io/qwik';
export default component$(() => {
  const route = useRoute();
  const category = route.params.category;
  return (
    <div>
      <p>当前商品分类: {category}</p>
    </div>
  );
});

组件渲染：

在获取到商品分类参数category后，根据这个参数从后端API获取对应的商品列表数据。可以使用fetch等方式进行数据请求。例如：

import { component$, useRoute } from '@builder.io/qwik';
export default component$(() => {
  const route = useRoute();
  const category = route.params.category;
  const [products, setProducts] = useState<Product[]>([]);
  onMount$(() => {
    fetch(`/api/products?category=${category}`)
     .then(response => response.json())
     .then(data => setProducts(data));
  });
  return (
    <div>
      <p>当前商品分类: {category}</p>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
});

这里假设后端API接口为/api/products，通过传递category参数获取相应分类的商品列表，然后在组件中进行渲染展示。同时，在样式和布局方面，可以根据电商项目的UI设计进行优化，使商品列表展示更加美观和符合业务需求。

星途面试题库

面试题：Qwik动态路由在电商项目商品分类展示中的应用

知识考点

面试题答案