面试题：Qwik中如何配置基本的路由

Question

请阐述在Qwik项目里，配置简单路由的步骤，比如从首页导航到一个特定页面的路由设置，包括如何定义路由路径以及对应的组件。

Answer 1

1. 安装必要依赖： 确保项目中已安装@builder.io/qwik-city，它包含了路由相关的功能。在package.json中可以看到类似如下依赖：

{
  "dependencies": {
    "@builder.io/qwik-city": "^1.0.0"
  }
}

若没有，可通过npm install @builder.io/qwik-city或yarn add @builder.io/qwik-city进行安装。

2. 定义路由路径及组件： 在src/routes目录下创建文件来定义路由。例如，要创建从首页导航到特定页面的路由：
   • 首页：在src/routes/index.tsx文件定义首页组件。例如：

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

export default component$(() => {
  return (
    <div>
      <h1>首页</h1>
      <a href="/specific-page">前往特定页面</a>
    </div>
  );
});

- **特定页面**：在`src/routes/specific - page.tsx`文件定义特定页面组件。例如：

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

export default component$(() => {
  return (
    <div>
      <h1>特定页面</h1>
    </div>
  );
});

这里src/routes目录结构及文件名直接对应路由路径，index.tsx对应根路径/，specific - page.tsx对应/specific - page路径。

3. 使用路由链接： 在首页组件中，如上述index.tsx，使用<a>标签来创建导航到特定页面的链接，href属性值设置为特定页面的路由路径/specific - page。

通过以上步骤，就完成了Qwik项目中从首页导航到特定页面的简单路由配置。