useRoute 函式的詳細介紹與使用示例

Amd794發表於2024-07-27
函式

title: useRoute 函式的詳細介紹與使用示例
date: 2024/7/27
updated: 2024/7/27
author: cmdragon

excerpt:
摘要：本文介紹了Nuxt.js中useRoute函式的詳細用途與示例，展示瞭如何在組合式API中使用useRoute獲取當前路由資訊，包括動態引數、查詢引數等，並提供了豐富的計算引用說明，如fullPath、hash、matched等，以及如何正確訪問查詢引數。

categories:

  • 前端開發

tags:

  • Nuxt.js
  • useRoute
  • 路由
  • API
  • 元件
  • 查詢
  • 動態

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在nuxt.js開發中，useRoute是一個非常實用的組合函式，它能夠幫助我們獲取當前路由的各種資訊，從而實現更加靈活和動態的頁面互動。

一、useRoute 函式的基本作用

useRoute函式的主要作用是返回當前路由的相關資訊。在 Vue 元件的模板中，我們可以使用$route來訪問路由，但在組合式 API
中，就需要使用useRoute。

二、示例展示

以下是一個使用動態頁面引數slug來透過useFetch呼叫 API 的示例：

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

<script>

export default {
  setup() {
    const route = useRoute();
    const { data: mountain } = await useFetch(`/api/mountains/${route.params.slug}`);
    return {
      mountain
    };
  }
};
</script>

在上述示例中，透過useRoute獲取到當前路由的params中的slug值，然後將其拼接到 API 路徑中，使用useFetch獲取資料並在頁面中展示。

三、useRoute 提供的計算引用

除了動態引數和查詢引數，useRoute還提供了以下豐富的計算引用：

  1. fullPath：這是與當前路由關聯的編碼 URL，包含路徑、查詢和雜湊。例如，如果當前 URL
    是https://example.com/page?param=value#hash，那麼 fullPath將是完整的這個字串。
  2. hash：獲取 URL 中以#開頭的解碼雜湊部分。
  3. matched：這是與當前路由位置匹配的規範化的匹配路由陣列。
  4. meta：可以用於附加到路由記錄的自定義資料。
  5. name：路由記錄的唯一名稱。
  6. path：獲取 URL 中編碼的路徑名部分。
  7. redirectedFrom：記錄在到達當前路由位置之前嘗試訪問的路由位置。

四、查詢引數的獲取

如果您需要訪問路由的查詢引數（例如在路徑/test?example=true中的example），那麼可以使用useRoute().query
而不是useRoute().params。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：https://blog.cmdragon.cn/posts/eb8617e107bf/

往期文章歸檔：

  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML頭部元素 | cmdragon's Blog
  • Nuxt.js頭部魔法：輕鬆自定義頁面元資訊，提升使用者體驗 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效資料獲取與處理指南 | cmdragon's Blog
  • Nuxt.js 錯誤偵探：useError 組合函式 | cmdragon's Blog
  • useCookie函式：管理SSR環境下的Cookie | cmdragon's Blog
  • 輕鬆掌握useAsyncData獲取非同步資料 | cmdragon's Blog
  • 使用 useAppConfig ：輕鬆管理應用配置 | cmdragon's Blog
  • Nuxt框架中內建元件詳解及使用指南（五） | cmdragon's Blog

相關文章