Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
通常、ページはその上にある全てのレイアウトを継承しています。つまり、src/routes/a/b/c/+page.svelte は4つのレイアウトを継承しています。
src/routes/+layout.sveltesrc/routes/a/+layout.sveltesrc/routes/a/b/+layout.sveltesrc/routes/a/b/c/+layout.svelte
たまに、現在のレイアウト階層から抜け出せると便利なときもあります。@ 記号の後に’リセット’する親セグメントの名前を追加することで、これを実現することができます — 例えば、/a/b/c で +page@b.svelte にすると src/routes/a/b/+layout.svelte が適用され、+page@a.svelte の場合は src/routes/a/+layout.svelte が適用されます。
+page@.svelte にリネームして、一気に最上位(root)のレイアウトまでリセットしてみましょう。
最上位(root)のレイアウトはアプリの全てのページに適用され、そこから抜け出すことはできません。
previous next
1
2
<h1>home</h1>