面试题：Qwik路由系统中如何实现页面间参数传递

Question

在Qwik的路由系统里，当从一个页面导航到另一个页面时，常常需要传递参数。请阐述至少两种在Qwik路由系统中实现页面间参数传递的方法，并说明每种方法的适用场景和优缺点。

Answer 1

1. URL 参数

• 实现方法：将参数直接附加在 URL 中，例如 /page?param1=value1&param2=value2。在 Qwik 中，可以通过 useRequest 钩子函数来获取这些参数。

import { useRequest } from '@builder.io/qwik';

export default component$(() => {
  const request = useRequest();
  const param1 = request.url.searchParams.get('param1');
  return <div>{param1}</div>;
});

• 适用场景：适用于简单的、公开的、对数据长度要求不高的参数传递，例如筛选条件、页面编号等。
• 优点：
  • 简单直观，易于理解和实现。
  • 可以直接在浏览器地址栏中看到参数，方便调试和分享链接。
• 缺点：
  • 数据长度有限，因为 URL 的长度是受限的。
  • 安全性较低，敏感信息不适合放在 URL 中传递，因为会暴露在地址栏中。

2. 状态管理（如 useStore）

• 实现方法：使用 Qwik 的状态管理机制，如 useStore 来共享数据。在导航前将参数存入共享状态，导航到新页面后从共享状态中读取参数。

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

const sharedStore = () => ({
  param: ''
});

export default component$(() => {
  const store = useStore(sharedStore());
  // 在某个操作中将参数存入 store
  store.param = 'value';
  return <div>设置参数</div>;
});

// 新页面
export default component$(() => {
  const store = useStore(sharedStore());
  return <div>{store.param}</div>;
});

• 适用场景：适用于需要在多个页面间共享复杂数据结构或敏感信息的场景，并且数据不需要在 URL 中体现。
• 优点：
  • 可以传递复杂的数据结构，不受 URL 长度限制。
  • 数据相对安全，不会暴露在 URL 中。
• 缺点：
  • 状态管理相对复杂，需要额外的代码来管理共享状态。
  • 页面间的参数传递依赖于共享状态的生命周期管理，如果状态被重置或销毁，可能会丢失数据。