什麼是 useRoute()?

更新 發佈閱讀 1 分鐘

useRoute() 是 Vue Router 提供的一個 Composition API 的函式(Composable)。它讓你可以存取當前頁面的路由物件(route object),這個物件包含了該路由的相關資訊,例如:現在的路徑(path)、動態路由參數(params)、查詢參數(query)...等。

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<template>
<div>
<p>目前的路徑:{{ route.path }}</p>
<p>語言:{{ route.query.lang }}</p>
</div>
</template>


$route 和 useRoute 比較

在 options api 時,可以直接使用 this.$route 來取得路由物件,但在 composition api setup 中並不能使用 this,需改用 useRoute 的寫法,且要額外 import。但兩種方式取得的內容是一樣的。

留言
avatar-img
留言分享你的想法!
avatar-img
阿榮 | 前端 ~ 互動藝術程式
2會員
39內容數
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/19
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
Thumbnail
2024/04/15
2024/04/15
看更多
你可能也想看
Thumbnail
去歐洲真的是又興奮又緊張。網路上常說歐洲治安不好,行前說明會時領隊也提醒:「不要背後背包,隨身物要放在前面比較安全!」 但出國玩總是想打扮得美美的啊~而且隨身總得帶些實用小物:雨傘、濕紙巾、小瓶水、萬用藥膏……體積雖小,但零零總總裝起來也不少。我在蝦皮購買了這4樣超實用旅遊好物!減緩我的焦慮感。
Thumbnail
去歐洲真的是又興奮又緊張。網路上常說歐洲治安不好,行前說明會時領隊也提醒:「不要背後背包,隨身物要放在前面比較安全!」 但出國玩總是想打扮得美美的啊~而且隨身總得帶些實用小物:雨傘、濕紙巾、小瓶水、萬用藥膏……體積雖小,但零零總總裝起來也不少。我在蝦皮購買了這4樣超實用旅遊好物!減緩我的焦慮感。
Thumbnail
開箱 3 套深受 0-6 歲寶寶喜愛的互動式童書,包含 Bizzy Bear 推拉書、小小音樂大師有聲書、Poke A Dot 泡泡書,有效提升寶寶閱讀興趣與親子共讀時光。搭配蝦皮雙 11 購物攻略,教你如何鎖定免運、折價券、高額回饋,並透過蝦皮分潤計畫,將日常購物開銷轉化為穩定育兒基金,聰明消費。
Thumbnail
開箱 3 套深受 0-6 歲寶寶喜愛的互動式童書,包含 Bizzy Bear 推拉書、小小音樂大師有聲書、Poke A Dot 泡泡書,有效提升寶寶閱讀興趣與親子共讀時光。搭配蝦皮雙 11 購物攻略,教你如何鎖定免運、折價券、高額回饋,並透過蝦皮分潤計畫,將日常購物開銷轉化為穩定育兒基金,聰明消費。
Thumbnail
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
Thumbnail
※ 什麼是路由? 當我們說「路由」時,可能是在談論路由器(實體設備),也可能是在談論路由(選擇路徑的過程),或者是在談論路徑(資料封包的傳輸路徑)。 路由器 (Router):這是一種實體設備,負責將資料封包 (Packet) 從一個網路傳送到另一個網路。它的工作方式類似於交通指揮,確保資料封包
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
這次要講的是 $route 及 $router 的區別,看似相似的兩個東西,其實應用時機也大不相同,以下以簡單的幾個例子舉例。
Thumbnail
這次要講的是 $route 及 $router 的區別,看似相似的兩個東西,其實應用時機也大不相同,以下以簡單的幾個例子舉例。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
Vue Router 動態路由,假設有一個賣場,裡面有 100 個商品,我們不可能針對它們創 100 對應的路由,因此我們需要一個動態路由,利用"路徑帶參數"的方式來撈取商品的資訊。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
Swiper.js 是一個功能齊全的輪播套件,除了輪播外,也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成,此篇文章將介紹 Options API 的撰寫方式,以及如何做樣式客製化。
Thumbnail
Swiper.js 是一個功能齊全的輪播套件,除了輪播外,也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成,此篇文章將介紹 Options API 的撰寫方式,以及如何做樣式客製化。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News