title: useRoute 函數的詳細介紹與使用示例 date: 2024/7/27 updated: 2024/7/27 author: cmdragon excerpt: 摘要：本文介紹了Nuxt.js中useRoute函數的詳細用途與示例，展示瞭如何在組合式API中使用useRoute獲取 ...
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
- 組件
- 查詢
- 動態
掃描二維碼關註或者微信搜一搜：編程智域 前端至全棧交流與成長
在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還提供了以下豐富的計算引用：
fullPath：這是與當前路由關聯的編碼 URL，包含路徑、查詢和哈希。例如，如果當前 URL
是https://example.com/page?param=value#hash，那麼fullPath將是完整的這個字元串。hash：獲取 URL 中以#開頭的解碼哈希部分。matched：這是與當前路由位置匹配的規範化的匹配路由數組。meta：可以用於附加到路由記錄的自定義數據。name：路由記錄的唯一名稱。path：獲取 URL 中編碼的路徑名部分。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
