Svelte中如何将+layout.js的load数据传递给Navbar实现无延迟渲染

错误原因 #

在SvelteKit中，+layout.js的load函数返回的数据，会封装在data对象中传递给对应布局下的+page.svelte，而非直接作为独立props暴露。你之前直接export let isAdmin的方式不符合框架规则，因此拿到的是undefined。

方案一：修改+page.svelte接收布局数据 #

调整页面组件的代码，通过data对象获取布局加载的认证信息：

<script>
  import Navbar from "../components/Navbar.svelte";
  import Modal from "../components/Modal.svelte";

  // 接收layout传递的完整data对象
  export let data;
  // 解构出需要的认证字段
  const { isAdmin, isAuthenticated } = data;

  console.log('Page Data - isAdmin:', isAdmin);
  console.log('Page Data - isAuthenticated:', isAuthenticated);
</script>

<Navbar {isAdmin} {isAuthenticated}/>

<Modal modalId="exampleModal" modalTitle="Create an account to like or comment." />

方案二：将Navbar移至布局组件（更推荐） #

Navbar属于全局布局元素，直接放在+layout.svelte中可以跳过页面组件的中转，逻辑更合理：

1. 创建/修改src/routes/+layout.svelte：

<script>
  import Navbar from "../components/Navbar.svelte";
  // 直接接收layout.js返回的数据
  export let data;
  const { isAdmin, isAuthenticated } = data;
</script>

<!-- 全局Navbar -->
<Navbar {isAdmin} {isAuthenticated}/>

<!-- 插槽用于渲染页面内容 -->
<slot />

2. 简化+page.svelte，移除Navbar相关代码：

<script>
  import Modal from "../components/Modal.svelte";
</script>

<Modal modalId="exampleModal" modalTitle="Create an account to like or comment." />

额外优化建议 #

将fetch的绝对路径改为相对路径，避免部署时的域名适配问题：

// 原代码
const response = await fetch('http://localhost:8000/check-admin-status/', { ... })

// 修改为
const response = await fetch('/check-admin-status/', { ... })

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