在 Vue.js 中，`$route` 和 `$router` 是(shi)兩個非常重要的對象，它(ta)(ta)們都與路由系統緊密相關。雖(sui)然它(ta)(ta)們都與路由有關，但它(ta)(ta)們在功(gong)能和使用上有明顯的區別。

首先(xian)，`$route` 是一個路(lu)(lu)由信(xin)息(xi)對象，它(ta)包(bao)含了當(dang)前激活的路(lu)(lu)由狀(zhuang)態信(xin)息(xi)，包(bao)括路(lu)(lu)徑(jing)、參數、查(cha)詢字符(fu)串等。`$route` 對象主要由 Vue Router 在內(nei)部填充(chong)和更新，是不可(ke)變(bian)的，也(ye)就是說(shuo)你不能直接修改(gai)它(ta)。

例如，如果你有一個(ge)路(lu)由路(lu)徑如 `/user/:id`，那么 `$route` 對象可能會(hui)有如下的屬性(xing)：

• `$route.path`：字符串，對應(ying)當前路(lu)由的(de)路(lu)徑(jing)，總是解析為(wei)絕對路(lu)徑(jing)，如 "/user/123"。

• `$route.params`：一個包含(han)動態(tai)片段(duan)和星號片段(duan)的鍵值對的對象。在這(zhe)個例子中，`$route.params.id` 的值將會是(shi) "123"。

• `$route.query`：一個包含 URL 查(cha)詢參數(shu)的(de)對象。例如，對于(yu)路徑 `/search?keyword=Vue`，則有(you) `$route.query.keyword`。

• `$route.hash`：當(dang)前路由的(de) hash 值(zhi) (帶 #) ，如(ru)果沒有 hash 值(zhi)，則為空字(zi)符串(chuan)。

• `$route.fullPath`：完成解析后(hou)的 URL，包(bao)含查詢(xun)參數和 hash 的完整路徑。

• `$route.matched`：數組(zu)，包(bao)含當前匹(pi)配的(de)路(lu)徑(jing)中所包(bao)含的(de)所有嵌套路(lu)徑(jing)片段(duan)的(de)路(lu)由記錄 。

• `$route.name`：當前路由的名字(zi) (如果(guo)有的話)。

另一方(fang)面，`$router` 是路由(you)(you)(you)實(shi)例，它提(ti)供了許多用于操作路由(you)(you)(you)的方(fang)法，如(ru)導(dao)航(hang)、添加或刪除路由(you)(you)(you)等(deng)。你可(ke)以使(shi)用 `$router` 對象來編程式(shi)地導(dao)航(hang)到不同的 URL。

例(li)如(ru)，你可以使用 `$router.push` 方法來(lai)導航到一(yi)個新(xin)的 URL：

this.$router.push('/user/123');`

或者使用命(ming)名路由進行導航：

this.$router.push({ name: 'user', params: { userId: 123 }});`

此外(wai)，`$router` 還提(ti)供(gong)了一(yi)些其他有用(yong)的(de)方法，如 `$router.replace`（替換當前的(de)歷(li)史(shi)記錄(lu)(lu)項，而不是添(tian)加(jia)一(yi)個(ge)新的(de)條目）和(he) `$router.go`（在瀏(liu)覽器的(de)歷(li)史(shi)記錄(lu)(lu)中前進或(huo)后退(tui)多少步(bu)，類似于 `window.history.go`）。

總的來說(shuo)，`$route` 和 `$router` 在(zai) Vue.js 的路由(you)(you)系統中各自(zi)扮演著重要的角色。`$route` 提(ti)供了(le)當(dang)前路由(you)(you)的詳(xiang)細信息，而 `$router` 則提(ti)供了(le)導(dao)航(hang)和路由(you)(you)操作的方法。理解這兩者的區別和用法，對于在(zai) Vue.js 中有效地使用路由(you)(you)系統至關重要。