/

如何在 Sapper 的 script 模塊之外訪問 URL 參數

如何在 Sapper 的 script 模塊之外訪問 URL 參數

假設您正在使用 Sapper 建立一個 Svelte 應用程式，並且您有一個動態的頁面路由，例如 /routes/[id].svelte。

您想要獲取 URL 的動態部分（在此案例中是 id），並且您知道可以在元件的 <script context="module"> 段落中的 preload() 函數中獲取它：

1
2
3
4
5
<script context="module">
  export async function preload({ params }) {
    const { id } = params
  }
</script>

但問題是，您需要在 preload() 之外使用它，以執行其他操作。

解決方式是從 preload 中返回它，並使用通常的 export * 語法將它定義為元件的 prop。

以下是一個示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

tags: [“Sapper”, “Svelte”, “URL parameter”, “script module”]