Vue-cli2.0中$router和$route的區別

最近在進行公司項目迭代，項目是兩年前的，使用的是vue框架。*_*我是vue小白*_*，在修改代碼的過程當中，其中用到了VueRouter，在路由的設置和跳轉中遇到了兩個對象$router和$route，有些傻傻分不清，後來本身結合網上的博客和本身本地的Vue devtools(vue調試工具)結構瞭解了它們的區別

router是Vue的一個實例

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

// 舉例 history對象
$router.push({path:'home'})
// 本質上是向history棧中添加一個路由，在咱們看來是切換路由，實際上是在添加一個history記錄複製代碼

$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

// 替換路由 沒有歷史記錄
$router.replace({path:'home'});
// 通常使用replace來作404頁面this.$router.replace('/')複製代碼

route是一個跳轉路由的對象

每個路由都會有route對象，它是一個局部對象。$route對象表示當前的路由信息，包含了當前 URL 解析獲得的信息。包含當前的路徑，參數，query對象等

• path

$route.path
    字符串，對應當前路由的路徑，老是解析爲絕對路徑，如 "/foo/bar"。複製代碼

• params

$route.params    
    一個 key/value 對象，包含了 動態片斷 和 全匹配片斷，若是沒有路由參數，就是一個空對象。複製代碼

• query

$route.query
      一個 key/value 對象，表示 URL 查詢參數。
      例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，
      若是沒有查詢參數，則是個空對象。複製代碼

• hash

$route.hash
      當前路由的 hash 值 (不帶 #) ，若是沒有 hash 值，則爲空字符串。錨點複製代碼

• fullPath

$route.fullPath
      完成解析後的 URL，包含查詢參數和 hash 的完整路徑。複製代碼

• matched

$route.matched
      數組，包含當前匹配的路徑中所包含的全部片斷所對應的配置參數對象。複製代碼

• name

$route.name  當前路徑名字複製代碼

• meta

$route.meta  路由元信息複製代碼