---
# System prepended metadata

title: Vue - $route 和 $router 的區別
tags: [Vue]

---

# Vue - $route 和 $router 的區別

## $route：
- 通過 this.$route 訪問**當前啟用的局部路由**
- 包含當前 URL 解析得到的信息，還有 URL 匹配到的路由記錄 (route records)
- 屬性：
    - **path**
    - **name**
    - **params**
    - **query**
    - hash
    - fullPath
    - matched
    - redirectedFrom
## $router：
- 通過 this.$router 訪問**全局路由實例**(路由器)
- 包括了路由的跳轉方法，鉤子函數
- 屬性：
    - app
    - mode
    - currentRoute
    - START_LOCATION
- 方法：
    - **push**
    - **replace**
    - **go**
    - **back**
    - **forward**
    - getMatchedComponents
    - resolve
    - addRoute
    - getRoutes
    - onReady
    - onError
- Hook methods：
    - **beforeEach**
    - **beforeResolve**
    - **afterEach**
<br><br><br><br><br>
參考如下：
> [Router 實例](https://router.vuejs.org/zh/api/#router-%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7)
> [vue中 $router 和 $route 的區別](https://segmentfault.com/a/1190000022666268)

###### tags: `Vue`