useRoute

範例

在以下範例中，我們透過 useFetch 使用動態頁面參數 - slug - 作為 URL 的一部分來呼叫 API。

<script setup lang="ts">
const route = useRoute()
const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`)
</script>

<template>
  <div>
    <h1>{{ mountain.title }}</h1>
    <p>{{ mountain.description }}</p>
  </div>
</template>

如果您需要存取路由查詢參數（例如路徑 /test?example=true 中的 example），則可以使用 useRoute().query 而不是 useRoute().params。

API

除了動態參數和查詢參數之外，useRoute() 還提供以下與目前路由相關的計算參考：

• fullPath：與目前路由相關聯的編碼 URL，包含路徑、查詢和雜湊。
• hash：URL 中以 # 開頭的解碼雜湊部分。
• query：存取路由查詢參數。
• matched：具有目前路由位置的正規化匹配路由陣列。
• meta：附加到記錄的自訂資料。
• name：路由記錄的唯一名稱。
• path：URL 中編碼的路徑名稱部分。
• redirectedFrom：在最終到達目前路由位置之前嘗試存取的路由位置。