vue中$router 與 $route區別

vue-router中常常會操做的兩個對象\(route和\)router兩個。
一、$route對象

$route對象表示當前的路由信息，包含了當前 URL 解析獲得的信息。包含當前的路徑，參數，query對象等。

**1.$route.path**
      字符串，對應當前路由的路徑，老是解析爲絕對路徑，如 "/foo/bar"。
**2.$route.params**
      一個 key/value 對象，包含了 動態片斷 和 全匹配片斷，
      若是沒有路由參數，就是一個空對象。
**3.$route.query**
      一個 key/value 對象，表示 URL 查詢參數。
      例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，
      若是沒有查詢參數，則是個空對象。
**4.$route.hash**
      當前路由的 hash 值 (不帶 #) ，若是沒有 hash 值，則爲空字符串。錨點
**5.$route.fullPath**
      完成解析後的 URL，包含查詢參數和 hash 的完整路徑。
**6.$route.matched**
      數組，包含當前匹配的路徑中所包含的全部片斷所對應的配置參數對象。
**7.$route.name    當前路徑名字**
**8.$route.meta  路由元信息

route object 出如今多個地方:

• 組件內的 this.$route 和 $route watcher 回調（監測變化處理）;
• router.match(location) 的返回值
• scrollBehavior 方法的參數
• 導航鉤子的參數：

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息對象,後面使用路由的鉤子函數就容易理解了
})

二、$router對象

$router對象是全局路由的實例，是router構造方法的實例。

路由實例方法：
一、push

// 字符串
      this.$router.push('home')
// 對象
      this.$router.push({ path: 'home' })
// 命名的路由
      this.$router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=123
      this.$router.push({ path: 'register', query: { plan: '123' }})

push方法其實和<router-link :to="...">是等同的。
注意：push方法的跳轉會向 history 棧添加一個新的記錄，當咱們點擊瀏覽器的返回按鈕時能夠看到以前的頁面。

二、go

// 頁面路由跳轉 前進或者後退
this.$router.go(-1) // 後退

三、replace
//push方法會向 history 棧添加一個新的記錄，而replace方法是替換當前的頁面，
不會向 history 棧添加一個新的記錄
05

// 通常使用replace來作404頁面
this.$router.replace('/')

配置路由時path有時候會加 '/' 有時候不加,以'/'開頭的會被看成根路徑，就不會一直嵌套以前的路徑。