第七章：`routeLoader$` —— 开门前先把货送到店里 - 现代前后端完全指南：软件城市宇宙

routeLoader$ 是 Qwik City 里最重要的读数据入口之一。

它的职责很纯：

在服务端执行
为当前路由准备数据
组件里通过 hook 读取

你可以把它理解成：

商铺开门前，后勤先把当天货品送到门店。

tsx

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

export const useArticle = routeLoader$(async ({ params, fail }) => {
  const article = await db.article.findBySlug(params.slug);

  if (!article) {
    return fail(404, {
      message: '文章不存在',
    });
  }

  return article;
});

export default component$(() => {
  const article = useArticle();

  if ('message' in article.value) {
    return <p>{article.value.message}</p>;
  }

  return (
    <article>
      <h1>{article.value.title}</h1>
      <p>{article.value.summary}</p>
    </article>
  );
});

#`routeLoader$` 的心智要点

它跑在服务端
它适合“读”，比如查数据库、拉 CMS、取商品详情
它会在导航时重新执行
它不是给你做 REST API 的，想精细控制响应，用 endpoint

#很像什么？

像 Remix loader
像 Next 里的“服务端取数能力”
但它在 Qwik City 里和路由、布局体系绑得更紧

#routeLoader$ 的心智要点

#很像什么？

#`routeLoader$` 的心智要点