Preload Functions

Preload

即使使用智能缓存，视图逻辑和懒加载代码仍可能出现瀑布流加载。通过预加载函数，可以在加载路由的同时并行获取数据，从而尽快使用数据。预加载函数可以在路由加载时调用，或在链接悬停时提前调用。

预加载函数接收一个对象作为其唯一参数，该对象可用于访问路由信息：

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";

const User = lazy(() => import("./pages/users/[id].js"));

// 预加载函数
function preloadUser({ params, location }) {
  // 执行预加载
}

// 在路由定义中传入
<Route path="/users/:id" component={User} preload={preloadUser} />;

键名	类型	描述
params	object	路由参数（与在路由组件内调用 `useParams()` 的值相同）
location	`{ pathname, search, hash, query, state, key}`	用于获取路径更多信息的对象（对应于 `useLocation()`）
intent	`"initial", "navigate", "native", "preload"`	指示调用此函数的原因。 "initial" - 路由首次显示（即页面加载） "native" - 导航源自浏览器（如后退/前进） "navigate" - 导航源自路由器（如调用导航或点击锚点） "preload" - 不是导航，仅预加载（如链接悬停）

一个常见的模式是在专门的 route.data.js 文件中导出预加载函数和与路由对应的数据包装器。这样可以导入数据函数而不加载其他任何内容。

import { lazy } from "solid-js";
import { Route } from "@solidjs/router";
import preloadUser from "./pages/users/[id].data.js";
const User = lazy(() => import("/pages/users/[id].js"));

// 在路由定义中
<Route path="/users/:id" component={User} preload={preloadUser} />;

preload 函数的返回值会在除 preload 之外的任何时候传递给页面组件。这可以在那里初始化内容，或者也可以使用以下新的 Data APIs。

报告此页面问题