路由预取是用户点击前就加载目标页面资源以实现瞬时跳转，核心为“预测+提前加载”，依赖视口检测、悬停、路由守卫等信号，并需配合按需启用、缓存控制、请求中断及服务端协同等策略。
路由预取，是指在用户真正点击跳转前，就提前加载目标页面所需的资源——比如 JavaScript 代码、CSS、甚至关键数据。它不是等用户点完才开始干活，而是“未雨绸缪”，让页面切换看起来几乎瞬时完成。
预取的核心逻辑是“预测+提前加载”
它不依赖魔法，而基于可观察的行为信号：
- 链接进入视口：用 Intersection Observer 检测用户正在看的导航项，自动触发预取（Next.js、Flamethrower 默认这么做）
-
鼠标悬停（hover）：用户把光标停在某个链接上，大概率下一步会点——这时调用
prefetchQuery（TanStack Query）或router.prefetch()（Next.js / Vue Router）发起请求 -
路由守卫拦截：在跳转前（如 Vue 的
beforeEach或 React Router 的loader函数）解析 URL 参数（如/user/123中的123），立刻拉取对应数据并缓存
针对大型项目，光预取不够，得配策略
资源多、用户路径复杂、网络条件不一——盲目预取反而拖慢首屏、浪费带宽。真正有效的提速，靠的是有节制、有判断的组合动作：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
-
按需启用，不全开：对低频入口（如“导出报表”“系统日志”）显式关闭预取，
<Link href="/logs" prefetch={false}> -
设置合理缓存时效：用
staleTime（TanStack Query）或cache-control（服务端）控制预取数据多久内可复用，避免展示过期内容 -
ID 类动态路由要防重复/取消：从
/post/1快速切到/post/2时，前一个请求应被AbortController中断，防止内存堆积和状态错乱 -
服务端协同更彻底：在 SSR 场景（如 Nuxt 3、Next.js App Router），用
useAsyncData或generateStaticParams在构建或服务端渲染阶段就把数据准备好，客户端直接 hydrate，零等待
别忽略基础但关键的配套
预取效果好不好，还卡在几个常被跳过的细节上：
-
懒加载组件必须到位：预取再快，如果目标页面组件本身是同步引入的（
import Page from './Page.vue'），整个包仍会阻塞；务必改用异步组件（() => import('./Page.vue')） - 错误要有兜底：预取失败不能静默吞掉——应记录日志，并在真正访问时降级为普通加载 + 友好提示（如“内容加载中…”而非白屏）
-
带宽感知要打开：检测
navigator.connection?.saveData或effectiveType，在网络差时自动禁用预取，优先保障核心流程
不复杂但容易忽略。
