官房文件裡是這樣說明的：

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

可以理解為：

this.$router 相當於一個全域性的路由器物件，包含了很多屬性和物件（比如 history 物件），任何頁面都可以呼叫其 push(),replace(),go() 等方法。

this.$route 表示當前路由物件，每一個路由都會有一個 route 物件，是一個區域性的物件，可以獲取對應的 name,path,params,query 等屬性。

關於 push() 方法：

想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄，所以，當用戶點選瀏覽器後退按鈕時，則回到之前的 URL。

當你點選 <router-link> 時，這個方法會在內部呼叫，所以說，點選 <router-link :to="..."> 等同於呼叫 router.push(...)。

push() 方法的呼叫：

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

注意：如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取http://www.cppcns.com而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有引數的 path：

    const userId = '123';程式設計客棧
 
    this.$router.push({path:`/user/${userId}程式設計客棧`});  //->/user/123
 
    this.$router.push({name:'user',params:{userId}});  //->/user/123
 
    //這裡的 params 不生效
    this.$router.push(www.cppcns.com
 
{path:'/user',params:{userId}});  //->/user

同樣的規則也適用於 router-link 元件的 to 屬性。

總結：

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 請求，引數不在位址列中顯示。

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

總結

到此這篇關於vue中this.$router和this.$route的區別及push()方法的文章就介紹到這了,更多相關Vue中this.$router和this.$route區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！