如何通过编程方式生成SvelteKit路由？CMS开发中的实现疑问

完全没必要用Node的FS API生成实际的+page.svelte或+layout.svelte文件，SvelteKit自带的动态路由就能完美解决你的需求，既不用创建冗余空目录，还能实现从数据动态加载完整页面的效果。

核心方案：动态路由+数据驱动渲染 #

1. 基础动态路由配置 #

在src/routes下创建[slug]目录，里面只需要两个文件：

• +page.server.js：负责根据URL中的slug从JSON（或数据库）加载对应页面数据
• +page.svelte：负责根据加载的数据渲染页面内容和布局

示例代码：
src/routes/[slug]/+page.server.js

import { error } from '@sveltejs/kit';
import pages from '$lib/data/pages.json';

export async function load({ params }) {
  // 根据slug匹配页面数据
  const page = pages.find(p => p.slug === params.slug);
  
  if (!page) throw error(404, '页面不存在');
  
  return { page };
}

src/routes/[slug]/+page.svelte

<script>
  export let data;
  // 动态加载指定布局组件（根据page.layout字段）
  const Layout = await import(`$lib/layouts/${data.page.layout}.svelte`);
</script>

<!-- 用动态组件渲染布局，嵌套页面内容 -->
<svelte:component this={Layout.default}>
  <!-- 直接渲染页面内容（如果是HTML格式用@html，markdown的话可以加解析库） -->
  {@html data.page.content}
</svelte:component>

2. 灵活处理布局继承 #

如果需要多级布局继承，可以给[slug]目录添加+layout.server.js和+layout.svelte：

• 在+layout.server.js的load函数中返回布局层级配置
• 在+layout.svelte里动态渲染父级布局，实现嵌套效果

3. 页面创建接口（针对已认证用户） #

用户创建页面的功能，直接写一个API接口处理数据写入，不用生成任何路由文件：
src/routes/api/pages/+server.js

import { error, json } from '@sveltejs/kit';
import fs from 'fs/promises';
import path from 'path';

export async function POST({ request, locals }) {
  // 验证用户权限（需结合你的认证逻辑）
  if (!locals?.user?.isAdmin) throw error(401, '无权限');

  const { slug, content, layout } = await request.json();
  const pagesPath = path.join(process.cwd(), 'src/lib/data/pages.json');
  
  // 读取并更新页面数据
  const pages = JSON.parse(await fs.readFile(pagesPath, 'utf8'));
  pages.push({ id: Date.now(), slug, content, layout });
  await fs.writeFile(pagesPath, JSON.stringify(pages, null, 2));

  return json({ success: true, slug });
}

为什么不生成实际文件？ #

• 冗余且难维护：生成的空文件/目录会污染代码仓库，版本控制麻烦
• 动态路由支持预渲染：如果需要静态站点，只需在+page.server.js中添加export const prerender = true，SvelteKit会自动预渲染所有动态路由页面
• 数据集中管理：所有页面内容存在JSON/数据库，修改和迭代更高效

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