面试题：Qwik路由路径设计之动态路由实践

Question

Qwik应用需要实现一个电商产品展示功能，产品有不同的类别（category）和子类别（sub - category），产品详情页面需要根据产品ID展示具体信息。要求设计一套合理的路由路径，以满足不同类别产品展示及详情查看的需求，同时要考虑SEO友好和用户体验。请写出具体的路由路径设计以及对应的代码示例（以Qwik框架允许的方式）。

Answer 1

路由路径设计

1. 首页展示所有产品类别：/products
2. 展示某个类别下所有子类别及产品：/products/:category
3. 展示某个子类别下的产品：/products/:category/:sub - category
4. 产品详情页：/products/:category/:sub - category/:productId

代码示例（基于Qwik框架）

1. 创建路由配置文件（假设为routes.ts）

import { createRoutes } from '@builder.io/qwik-city';

export const routes = createRoutes(() => {
  return [
    {
      path: '/products',
      component: async () => import('./components/ProductCategoriesPage.tsx')
    },
    {
      path: '/products/:category',
      component: async () => import('./components/ProductsByCategoryPage.tsx')
    },
    {
      path: '/products/:category/:sub - category',
      component: async () => import('./components/ProductsBySubCategoryPage.tsx')
    },
    {
      path: '/products/:category/:sub - category/:productId',
      component: async () => import('./components/ProductDetailPage.tsx')
    }
  ];
});

2. 示例页面组件（以ProductDetailPage.tsx为例）

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

export default component$(() => {
  const { category, 'sub - category': subCategory, productId } = useRouteParams();

  return (
    <div>
      <h1>Product Detail</h1>
      <p>Category: {category}</p>
      <p>Sub - Category: {subCategory}</p>
      <p>Product ID: {productId}</p>
      {/* 这里可以根据productId获取并展示具体产品信息 */}
    </div>
  );
});

其他页面组件（ProductCategoriesPage.tsx、ProductsByCategoryPage.tsx、ProductsBySubCategoryPage.tsx）的实现思路类似，通过useRouteParams获取参数，并根据参数进行数据获取和展示。这种设计既满足了不同类别产品展示及详情查看的需求，又对SEO友好，同时提供了较好的用户体验。