useRoute

原始檔
useRoute 可組合函式返回當前路由。
在 Vue 元件的模板中，您可以使用 $route 訪問路由。

useRoute 可組合函式是 vue-router 中同名可組合函式的包裝，它提供對 Nuxt 應用程式中當前路由的訪問。

主要區別在於，在 Nuxt 中，此可組合函式確保路由僅在導航後頁面內容更改後才更新。相比之下，vue-router 版本會立即更新路由，這可能導致模板中依賴路由元資料的不同部分出現同步問題，例如。

示例

在以下示例中，我們透過 useFetch 呼叫 API，其中動態頁面引數 slug 作為 URL 的一部分。

~/pages/[slug].vue
<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: 在最終到達當前路由位置之前嘗試訪問的路由位置

常見陷阱

路由同步問題

務必使用 Nuxt 的 useRoute() 可組合函式，而不是 vue-router 中的可組合函式，以避免頁面導航期間的同步問題。直接從 vue-router 匯入 useRoute 會繞過 Nuxt 的實現。

// ❌ do not use `useRoute` from `vue-router`
import { useRoute } from 'vue-router'
// ✅ use Nuxt's `useRoute` composable
import { useRoute } from '#app'

在中介軟體中呼叫 useRoute

不建議在中介軟體中使用 useRoute，因為它可能導致意外行為。在中介軟體中沒有“當前路由”的概念。useRoute() 可組合函式只能在 Vue 元件的 setup 函式或 Nuxt 外掛中使用。

這也適用於任何內部使用 useRoute() 的可組合函式。
在中介軟體部分閱讀更多關於訪問路由的資訊。

route.fullPath 的水合問題

瀏覽器不會發送URL 片段（例如 #foo）發出請求時。因此，使用 route.fullPath 影響模板可能會觸發水合問題，因為這在客戶端會包含片段，但在伺服器上則不會。

更多資訊請閱讀 https://router.vuejs.org/api/type-aliases/RouteLocationNormalizedLoaded.html。