面试题：Qwik中如何配置基本的路由并实现简单导航

在Qwik项目中，假设我们有两个页面组件`HomePage`和`AboutPage`，请描述如何配置路由，使得用户在访问`/`时显示`HomePage`，访问`/about`时显示`AboutPage`，并通过点击链接实现这两个页面之间的导航。请简要说明实现步骤并给出关键代码示例。

48.2万热度

难度

前端开发Qwik

实现步骤：
- 在Qwik项目中，首先确保安装了必要的路由相关依赖（通常Qwik自带一些路由功能）。
- 配置路由规则，告诉应用程序在不同路径下应渲染哪个组件。
- 在页面中创建链接，使用路由功能来实现页面间导航。
关键代码示例：
- 配置路由（通常在路由配置文件或主应用入口处）：

import { component$, qwikCity } from '@builder.io/qwik-city';
import { HomePage } from './HomePage';
import { AboutPage } from './AboutPage';

export const routes = [
  { path: '/', component: component$(HomePage) },
  { path: '/about', component: component$(AboutPage) }
];

export default qwikCity({ routes });

在页面中创建导航链接（例如在HomePage组件中添加到AboutPage的链接）：

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

export default component$(() => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">Go to About Page</Link>
    </div>
  );
});

在AboutPage组件中添加返回HomePage的链接：

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

export default component$(() => {
  return (
    <div>
      <h1>About Page</h1>
      <Link href="/">Go to Home Page</Link>
    </div>
  );
});

面试题：Qwik中如何配置基本的路由并实现简单导航

知识考点

面试题答案