面试题：Qwik中如何实现带参数的页面导航

在商品列表页添加点击事件：
- 在Qwik中，使用on:click指令添加点击处理函数。假设商品列表项的HTML结构类似如下：
```
<ul>
  {#each products as product}
    <li key={product.id} on:click={() => navigateToProductDetail(product.id)}>
      {product.name}
    </li>
  {/each}
</ul>
```
- 这里products是商品数组，product.id是每个商品的唯一标识符，navigateToProductDetail是自定义的跳转到商品详情页的函数。
定义跳转函数：
- 在组件的脚本部分（.qwik文件的<script>标签内）定义navigateToProductDetail函数。
```
import { navigate } from '@builder.io/qwik';

export default component$(() => {
  const navigateToProductDetail = (productId: string) => {
    navigate(`/product/${productId}`);
  };

  return (
    <div>
      {/* 商品列表代码 */}
    </div>
  );
});
```
- 这里通过import { navigate } from '@builder.io/qwik';引入navigate函数，它用于在Qwik应用中实现页面导航。navigate函数接收一个URL路径作为参数，这里构造了包含商品ID的商品详情页路径/product/${productId}。
在商品详情页接收参数：
- 在商品详情页组件的脚本部分获取URL参数。假设商品详情页组件为ProductDetail.qwik。
```
import { component$, useRouteParams } from '@builder.io/qwik';

export default component$(() => {
  const { productId } = useRouteParams();

  return (
    <div>
      <p>商品详情页，商品ID: {productId}</p>
    </div>
  );
});
```
- 通过import { useRouteParams } from '@builder.io/qwik';引入useRouteParams钩子函数，它可以获取当前路由的参数。这里解构出productId参数并在页面中展示。

关键代码总结：

列表页点击处理：

<li on:click={() => navigateToProductDetail(product.id)}>{product.name}</li>

导航函数：

const navigateToProductDetail = (productId: string) => {
  navigate(`/product/${productId}`);
};

详情页接收参数：

const { productId } = useRouteParams();

星途面试题库

面试题：Qwik中如何实现带参数的页面导航

知识考点

面试题答案