假設您正在使用 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>