预渲染SvelteKit/Tauri应用中跨页传值及路由方案咨询

针对你在构建SvelteKit/Tauri嵌入式SurrealDB项目时，动态路由/edit/book/[book_id]因预渲染要求编译时知晓所有路由而失效的问题，以下是几种可行的解决方案：

方案一：禁用动态路由的预渲染 #

直接调整SvelteKit的页面配置，让动态路由跳过预渲染，保持开发环境的运行时逻辑：

• 在/edit/book/[book_id]/+page.ts中添加预渲染禁用配置：

export const prerender = false;

• 同时在根路由布局src/routes/+layout.ts中设置客户端渲染模式（适配Tauri桌面应用场景）：

export const ssr = false;
export const prerender = false;

这样Tauri构建时不会预渲染该动态路由页面，运行时由客户端解析路由参数并从SurrealDB拉取数据，和开发环境行为一致。

方案二：用404页面兜底处理动态路由 #

如果需要保留部分页面的预渲染，可以将动态路由的逻辑移至404错误页面：

• 在src/routes/+error.svelte中，判断当前路由是否匹配/edit/book/[book_id]格式，解析出book_id参数
• 在错误页面内实现书籍数据拉取和编辑界面渲染逻辑
• 确保+error.ts中设置prerender: true，让Tauri能正常预渲染该页面，运行时再动态处理路由

方案三：放弃动态路由，用状态管理传递数据 #

通过Svelte的全局store传递选中书籍的数据，跳转到固定路由完成编辑：

1. 创建全局状态store（src/stores/bookStore.ts）：

import { writable } from 'svelte/store';
export const selectedBook = writable(null);

2. 在列表页/edit/book/+page.svelte中，点击书籍时先存入store再跳转：

<script>
  import { selectedBook } from '$lib/stores/bookStore';
  import { goto } from '$app/navigation';

  const handleBookSelect = (book) => {
    $selectedBook = book;
    goto('/edit/book/selected_book');
  };
</script>

<!-- 列表项绑定点击事件 -->
{#each books as book}
  <div on:click={() => handleBookSelect(book)}>{book.title}</div>
{/each}

3. 在编辑页/edit/book/selected_book/+page.svelte中读取store数据进行编辑：

<script>
  import { selectedBook } from '$lib/stores/bookStore';
</script>

{#if $selectedBook}
  <form>
    <input type="text" bind:value={$selectedBook.title} />
    <!-- 其他编辑字段 -->
  </form>
{/if}

方案四：预生成已知动态路由（仅适用于编译时可获取书籍ID场景） #

如果编译阶段能获取所有书籍的ID（比如从静态数据文件预导出），可以让SvelteKit预生成所有动态路由页面：

• 在/edit/book/[book_id]/+page.ts中配置预渲染并返回所有路由条目：

import { getAllBookIds } from '$lib/db'; // 编译时可执行的获取书籍ID函数

export const prerender = true;

export async function entries() {
  const bookIds = await getAllBookIds();
  return bookIds.map(id => ({ book_id: id }));
}

构建时SvelteKit会为每个book_id生成对应的静态页面，满足Tauri的预渲染要求。但该方案仅适用于书籍数据在编译时已确定的场景，嵌入式SurrealDB运行时新增的书籍无法覆盖。

内容的提问来源于stack exchange，提问作者Ölavur Nón