vue2.0中的$router 和 $route的區別

最近在學習vue的單頁面應用開發，須要vue全家桶，其中用到了VueRouter，在路由的設置和跳轉中遇到了兩個對象$router 和 $route ，有些傻傻分不清，後來本身結合網上的博客和本身本地的Vue devtools結構瞭解了他們的區別

1.router是VueRouter的一個對象，經過Vue.use(VueRouter)和VueRouter構造函數獲得一個router的實例對象，這個對象中是一個全局的對象，他包含了全部的路由包含了許多關鍵的對象和屬性。

舉例：history對象

$router.push({path:'home'});本質是向history棧中添加一個路由，在咱們看來是 切換路由，但本質是在添加一個history記錄

方法：

$router.replace({path:'home'});//替換路由，沒有歷史記錄

2.route是一個跳轉的路由對象，每個路由都會有一個route對象，是一個局部的對象，能夠獲取對應的name,path,params,query等

咱們能夠從vue devtools中看到每一個路由對象的不一樣

這兩個不一樣的結構能夠看出二者的區別，他們的一些屬性是不一樣的。

• $route.path 
  字符串，等於當前路由對象的路徑，會被解析爲絕對路徑，如 "/home/news" 。
• $route.params 
  對象，包含路由中的動態片斷和全匹配片斷的鍵值對
• $route.query 
  對象，包含路由中查詢參數的鍵值對。例如，對於 /home/news/detail/01?favorite=yes ，會獲得$route.query.favorite == 'yes' 。
• $route.router 
  路由規則所屬的路由器（以及其所屬的組件）。
• $route.matched 
  數組，包含當前匹配的路徑中所包含的全部片斷所對應的配置參數對象。
• $route.name 
  當前路徑的名字，若是沒有使用具名路徑，則名字爲空。

$route.path, $route.params, $route.name, $route.query這幾個屬性很容易理解，看示例就能知道它們表明的含義