面试题：Qwik中路由与导航基础关系

Question

在Qwik中，路由和导航在概念上有哪些区别与联系？请简要阐述，并举例说明如何通过路由配置来实现简单的页面导航。

Answer 1

区别

• 路由：主要关注如何将不同的URL映射到对应的页面组件或视图，它定义了应用程序的URL结构以及每个URL对应的处理逻辑。是一种静态的映射关系，类似于一种规则的设定。例如，定义 /home 映射到 HomePage 组件。
• 导航：侧重于用户在应用程序中从一个页面移动到另一个页面的行为动作。它是基于路由规则之上，通过改变URL触发应用程序加载相应的路由组件来实现页面切换。比如用户点击一个链接从首页跳转到详情页的这个动作就是导航。

联系

导航是基于路由规则来实现的。路由提供了可能的路径映射，而导航则是在运行时根据用户操作按照路由规则进行页面切换。当用户进行导航操作（如点击链接、调用API）时，应用程序根据路由配置找到对应的组件并进行渲染。

实现简单页面导航的路由配置示例

1. 安装和初始化Qwik项目：

   npm create qwik@latest my - app
   cd my - app
   

2. 创建页面组件： 在 src/routes 目录下创建页面组件，例如 home.tsx 和 about.tsx。
   • home.tsx

   import { component$ } from '@builder.io/qwik';
   
   export default component$(() => {
       return <div>Home Page</div>;
   });
   

   • about.tsx

   import { component$ } from '@builder.io/qwik';
   
   export default component$(() => {
       return <div>About Page</div>;
   });
   

3. 配置路由： 在 src/routes 目录下，Qwik 会自动根据文件结构生成路由。home.tsx 对应 /home 路由，about.tsx 对应 /about 路由。
4. 添加导航链接： 在应用的某个公共组件（如 layout.tsx）中添加导航链接。

   import { component$, Link } from '@builder.io/qwik';
   
   export default component$(() => {
       return (
           <div>
               <nav>
                   <Link href="/home">Home</Link>
                   <Link href="/about">About</Link>
               </nav>
           </div>
       );
   });
   

当用户点击这些链接时，就会根据路由配置实现页面导航。