理解

官方文件說明如下：

通過注入路由，我們可以在任何元件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前的路由。

注入路由，在 mian.js 中引入 路由，並且注入。

import router from './router';
new Vue({
  el: '#app',
  router,
  ...
  mounted() { }
})

可以理解為：

• this.$router 相當於一個全域性的路由物件，包含路由相關的屬性、物件 (如 history 物件) 和方法，在任何頁面都可以通過 this.$router 呼叫其方法如 push()
  、go() 、resolve() 等。
• this.$route 表示當前的路由物件。每一個路由都有一個 route 物件，它是一個區域性的物件，可以獲取當前路由對應的 name , params, path , query 等屬性。

this.$router 等同於 router。在 main.js 中，我們直接引入了 router 則可以使用類似這樣的方式 router.push() 呼叫相關屬性或者方法。

使用: 以 push() 方法為例

在 vue 專案開發中， 我們通常使用 router.push() 實現頁面間的跳轉，稱為程式設計式導航。這個方法會向 history 棧中新增一個歷史記錄，但使用者點選瀏覽器的後退按鈕時，就會回到之前的 URL。

當我們點選 時，會在內部呼叫 router.push() 方法。

push方法呼叫：

//字串  
this.$router.push('home') //->/home

//物件
this.$router.push({path:'home'}) //->/home

//命名的路由
this.$router.push({name:'user', params:{userId: '123'}}) //->/user/123

//帶查詢引數，變成 /register?plan=private
this.$router.push({path:'register', query:{plan:private}}) 

const userId = '123';
//這裡的 params 不生效
this.$router.push({path:'/user', params:{userId}});  //->/user
 

params 傳參，push 裡面只能是 name: 'xxx', 不能是 path: 'xxx'，因為 params 只能用 name 來引入路由，如果這裡寫成了 path ，接收引數頁面會是 undefined。

路由傳參的方式：

1、手寫完整的 path:
 
    this.$router.push({path: `/user/${userId}`});
 
    獲取引數：this.$route.params.userId
 
2、用 params 傳遞：
 
    this.$router.push({name:'user', params:{userId: '123'}});
 
    獲取引數：this.$route.params.userId
 
    url 形式：url 不帶引數，http:localhost:8080/#/user
 
3、用 query 傳遞：
 
    this.$router.push({path:'/user', query:{userId: '123'}});
 
    獲取引數：this.$route.query.userId
 
    url 形式：url 帶引數，http:localhost:8080/#/user?userId=123

直白的說，query 相當於 get 請求，頁面跳轉的時候可以在位址列看到請求引數，params 相當於 post 請求，引數不在位址列中顯示。

要注意，以 / 開頭的巢狀路徑會被當作根路徑。 這讓你充分的使用巢狀元件而無須設定巢狀的路徑。