Vue2.0 $router和$route的區別

使用Vue2.0 router 過程中,會對router 和route 會有混淆,現做筆記記錄

一、$router

VueRouter對象
  • router為VueRouter實例,主要是實現路由跳轉使用。想要導航到不同URL,則使用router.push方法,

// 字符串
this.router.push('home') // 對象 this.router.push({ path: 'home' })
// 命名的路由
this.router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢參數,變成 /detail?did=123 this.router.push({ path: 'detail', query: { did: '123' }})

push方法其實和<router-link :to="...">是等同的。
注意:push方法的跳轉會向 history 棧添加一個新的記錄,當我們點擊瀏覽器的返回按鈕時可以看到之前的頁面。

二、$route

Object對象
  • route object ,路由信息對象,表示當前激活的路由的狀態信息,包含了完整路徑、當前 URL 解析得到的信息,還有 URL 匹配到的 route records(路由記錄)
  • route object 是 immutable(不可變) 的,每次成功的導航后都會產生一個新的對象

路由信息對象:即router會被注入每個組件中,可以利用它進行一些信息的獲取** **1.route.path
字符串,對應當前路由的路徑,總是解析為絕對路徑,如 "/foo/bar"。
2.route.params** 一個 key/value 對象,包含了 動態片段 和 全匹配片段, 如果沒有路由參數,就是一個空對象。 **3.route.query
一個 key/value 對象,表示 URL 查詢參數。
例如,對于路徑 /foo?user=1,則有 route.query.user == 1, 如果沒有查詢參數,則是個空對象。 **4.route.hash**
當前路由的 hash 值 (不帶 #) ,如果沒有 hash 值,則為空字符串。
5.route.fullPath** 完成解析后的 URL,包含查詢參數和 hash 的完整路徑。 **6.route.matched
數組,包含當前匹配的路徑中所包含的所有片段所對應的配置參數對象。
7.$route.name
當前路徑名字

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容