スクリプトモジュールの外部でSapperのURLパラメータにアクセスする方法

Sapperを使用してSvelteアプリケーションを構築していて、たとえば動的なページルートがあるとします。/routes/[id].svelte。

URLの動的な部分を取得したい（idこの場合）、そしてあなたはあなたがそれを得ることができることを知っていますpreload()の機能<script context="module">コンポーネントの一部：

<script context="module">
	export async function preload({ params }) {
		const { id } = params
	}
</script>

しかし、問題はあなたがそれを外で使う必要があるということですpreload()、何か他のことを実行するため。

そうする方法は、からそれを返すことですpreload、通常のを使用して、コンポーネントの小道具として定義しますexport *構文。

次に例を示します。

<script context="module">
	export async function preload({ params }) {
		const { id } = params
		return { id }
	}
</script>
<script>
export let id
if (typeof window !== ‘undefined’) {
alert(id)
}
</script>

より洗練されたチュートリアル：

• Svelte入門-短いチュートリアル
• Svelteで小道具を操作する方法
• Svelteにコンポーネントをインポートする方法
• Svelteコンポーネントから関数と変数をエクスポートする方法
• Svelteテンプレート：条件付きロジック
• Svelteコンポーネントをオンデマンドで再レンダリングする方法
• Svelteスロット
• Svelteテンプレートにコメントを追加する方法
• Svelteバインディング
• Svelteでの状態更新の処理
• Svelteのリアクティブステートメント
• Svelteライフサイクルイベント
• Svelteテンプレート：ループ
• SvelteテンプレートでPromiseを解決する
• Svelteでのイベントの操作
• Svelteのクロスコンポーネント状態管理
• スクリプトモジュールの外部でSapperのURLパラメータにアクセスする方法
• SvelteでCSSを動的に適用する方法
• SapperでURLにリダイレクトする方法
• Svelteテンプレートでforループをシミュレートする方法