SvelteKit如何在嵌套路由间保留页面数据？

完全可以实现，最简便的方案是把共享数据的加载逻辑从/foo/[slug]/+page.js移到同目录下的+layout.js，这样嵌套路由就能自动继承这些数据，无需额外的stores或复杂处理。

具体操作步骤： #

1. 迁移共享load逻辑到+layout.js
   把原来+page.js中加载共享文件的代码，移到/foo/[slug]/+layout.js里：

   // /foo/[slug]/+layout.js
   export async function load({ params }) {
     // 原来+page.js里加载文件的逻辑，比如根据slug获取文件内容
     const sharedFile = await fetch(`/api/files/${params.slug}`).then(res => res.text());
     return { sharedFile };
   }
   

2. 父页面/foo/[slug]/+page.svelte使用数据
   父页面依然可以直接通过data访问共享数据，和原来用+page.js时一样：

   <script>
     export let data;
   </script>
   
   <div>父页面展示共享文件：{data.sharedFile}</div>
   

3. 嵌套路由/foo/[slug]/bar/+page.svelte使用数据
   嵌套页面同样直接通过data就能拿到父layout加载的共享数据，不需要额外请求：

   <script>
     export let data;
   </script>
   
   <div>嵌套页面复用共享文件：{data.sharedFile}</div>
   

关键原理： #

• SvelteKit中，路由目录下的+layout.js的load数据会自动传递给该目录下的所有子路由（包括自身的+page.svelte和嵌套的路由页面）。
• 无论你是从父页面导航到嵌套路由，还是首次直接访问嵌套路由，父layout的load函数都会执行，确保共享数据被加载。

额外说明： #

如果父页面还有自己独有的数据需要加载，可以保留/foo/[slug]/+page.js，只把共享逻辑放在+layout.js里。此时父页面的data会同时包含layout和page的返回值，嵌套页面则只会拿到layout的共享数据（如果嵌套页面自己有+page.js，会合并两者的数据）。

内容的提问来源于stack exchange，提问作者IbbyStack