面试题：Qwik链接组件的基本使用

创建基本链接组件：
- 在Qwik项目中，首先可以使用qwik:component装饰器来定义一个组件。例如，在TypeScript中：
```
import { component$, useNavigate } from '@builder.io/qwik';

export const LinkComponent = component$(() => {
  const navigate = useNavigate();
  const handleClick = (event: MouseEvent) => {
    event.preventDefault();
    // 这里处理点击事件，比如导航到指定页面
    navigate('/target - page');
  };
  return (
    <a href="/target - page" onClick={handleClick}>
      Go to Target Page
    </a>
  );
});
```
- 在上述代码中：
  - 引入useNavigate函数，它是Qwik提供的用于导航的钩子函数。
  - 在组件内部，通过useNavigate获取navigate函数。
  - 定义handleClick函数，在函数内部调用event.preventDefault()防止默认的链接跳转行为，然后使用navigate函数导航到指定页面/target - page。

传递参数给目标页面：

通过URL参数传递：

可以在导航时将参数拼接到URL中。例如：

const handleClick = (event: MouseEvent) => {
  event.preventDefault();
  const param1 = 'value1';
  const param2 = 'value2';
  navigate(`/target - page?param1=${param1}&param2=${param2}`);
};

在目标页面中，可以通过useRequest钩子来获取这些参数。例如：

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

export const TargetPage = component$(() => {
  const { url } = useRequest();
  const param1 = url.searchParams.get('param1');
  const param2 = url.searchParams.get('param2');
  return (
    <div>
      <p>Param1: {param1}</p>
      <p>Param2: {param2}</p>
    </div>
  );
});

使用状态管理（如果适用）：

可以使用Qwik的状态管理机制，如createSignal和useStore等。例如，先创建一个共享状态：

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

const sharedState = createStore({
  paramForTargetPage: null
});

在链接组件中设置状态：

import { component$, useNavigate } from '@builder.io/qwik';
import { sharedState } from './shared - state';

export const LinkComponent = component$(() => {
  const navigate = useNavigate();
  const handleClick = (event: MouseEvent) => {
    event.preventDefault();
    sharedState.paramForTargetPage = 'Some value';
    navigate('/target - page');
  };
  return (
    <a href="/target - page" onClick={handleClick}>
      Go to Target Page
    </a>
  );
});

在目标页面中获取状态：

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

export const TargetPage = component$(() => {
  const state = useStore(sharedState);
  return (
    <div>
      <p>Param from shared state: {state.paramForTargetPage}</p>
    </div>
  );
});

星途面试题库

面试题：Qwik链接组件的基本使用

知识考点

面试题答案