假設您正在使用 Sapper 建立一個 Svelte 應用程式,並且您有一個動態的頁面路由,例如 /routes/[id].svelte
。
您想要獲取 URL 的動態部分(在此案例中是 id
),並且您知道可以在元件的 <script context="module">
段落中的 preload()
函數中獲取它:
<script context="module">
export async function preload({ params }) {
const { id } = params
}
</script>
但問題是,您需要在 preload()
之外使用它,以執行其他操作。
解決方式是從 preload
中返回它,並使用通常的 export *
語法將它定義為元件的 prop。
以下是一個示例:
<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>