一、router為VueRouter的例項，相當於一個全域性的路由器物件，裡面含有很多屬性和子物件，例如history物件。。。經常用的跳轉連結就可以用this.$router.push，和router-link跳轉一樣。。。

this.$router.push會往history棧中新增一個新的記錄。。詳細見vue官方文件

route相當於當前正在跳轉的路由物件。。可以從裡面獲取name,path,params,query等。。

列印this.$route和this.$router。

路由傳參的方式

1.可以手寫完整的path：

this.$router.push({path:`/user/${userId}`})

這樣傳遞引數的話，配置路由的時候需要在path上加引數path：user/：userId。

這種接收引數的方式是this.$route.params.userId。

2.也可以用params傳遞：

3.也可以用query傳遞：

query傳參是針對path的，params傳參是針對name的。。接收引數的方式都差不多。。this.$route.query.和this.$route.params.

注意這只是跳轉url，跳轉到這個url顯示什麼元件，得配置路由。router跳轉和<router-link>標籤跳轉，規則差不多。

展示上的話：

注意：如果提供了path，params將會被忽略，但是query不屬於這種情況。。。

如果使用完整路徑和query傳參，重新整理頁面時不會造成路由傳參的引數丟失。

這個vue官方文件講的很詳細。

二、有時候配置路由時path有時候會加 '/' 有時候不加,例如path:'name'和path:'/name'。區別其實官方文件說了，我當時沒仔細看，導致這個問題還困擾了我很久。

意思就是以 / 開頭的會被當做路徑，就不會一直巢狀之前的路徑。

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