在 Vue Router 中,$route 和 $router 是兩個不同的對象,它們各自承擔著不同的角色。下面是它們的主要區別:
一、$route
- 定義
$route 是當前路由的信息對象,包含了與當前路由相關的狀態和參數。它是一個只讀對象。
2. 主要屬性
params:動態路由參數,例如 /user/:id 中的 id。
query:查詢參數,通常在 URL 中以 ? 開始,例如 /user?id=123。
path:當前路由的路徑。
name:路由的名稱(如果有定義)。
fullPath:當前路由的完整路徑,包括查詢參數。
-
使用場景
訪問當前路由的狀態和參數。
在組件中獲取路由信息,例如動態加載數據。 -
示例
// 在組件中使用 $route
console.log(this.$route.params.id); // 獲取動態路由參數
console.log(this.$route.query.q); // 獲取查詢參數
二、$router
- 定義
$