grouped layout in sveltekit
Tl;dr
在
routes文件夹中使用(分组名)的形式对路由和layout进行分组
比如一开始写的代码结构是这样的, 如下
routes
├── admin
│ ├── +layout.svelte
│ ├── +page.server.ts
│ └── +page.svelte
└── quotes
├── id
│ └── [quoteId]
│ ├── +page.server.ts
│ └── +page.svelte
├── tags
│ ├── [tag]
│ │ ├── +page.server.ts
│ │ └── +page.svelte
│ ├── +page.server.ts
│ └── +page.svelte
├── +layout.server.ts
├── +layout.svelte
└── +page.svelte随着业务的开展, 我们需要对某些页面根据不同的路由使用不同的布局.
那么就可以改成
routes
├── (app)
│ └── quotes
│ ├── id
│ │ └── ...
│ ├── tags
│ │ └── ...
│ ├── +layout.svelte
│ └── +page.svelte
├── (dashboard)
│ └── admin
│ ├── +layout.svelte
│ ├── +page.server.ts
│ └── +page.svelte
└── +layout.svelte然后再次访问 /quotes/ 或者 /admin 的时候, 就会根据不同的路由显示不同的布局了
+page@
如果需要针对某一个页面(aka 路由)单独设置布局, 比如想要重置 (app)/quotes/tags/+page
那么可以这样写
routes
├── (app)
│ └── quotes
│ ├── id
│ │ └── ...
│ ├── tags
│ │ └── +page@(app).svelte
│ ├── +layout.svelte
│ └── +page.svelte
├── (dashboard)
│ └── admin
│ ├── +layout.svelte
│ ├── +page.server.ts
│ └── +page.svelte
└── +layout.svelte