VueJs路由跳轉——vue-router的使用詳解
阿新 • • 發佈：2019-02-04
路由物件和路由匹配
路由物件，即$router會被注入每個元件中，可以利用它進行一些資訊的獲取。如
| 屬性 | 說明 |
|---|---|
| $route.path | 當前路由物件的路徑，如'/view/a' |
| $rotue.params | 關於動態片段（如/user/:username)的鍵值對資訊,如{username: 'paolino'} |
| $route.query | 請求引數，如/foo?user=1獲取到query.user = 1 |
| $route.router | 所屬路由器以及所屬元件資訊 |
| $route.matched | 陣列，包含當前匹配的路徑中所包含的所有片段所對應的配置引數物件。 |
| $route.name | 當前路徑名字 |
當然，你也可以在自己定義路由規則（map)的時候自定義欄位，用以特殊目的。
全匹配片段的語法是使用萬用字元* 如，/user/*any就會匹配到任何以/user為開頭的路徑，並給params物件中賦值一個屬性any
動態片段的語法就是使用:作為標誌。
使用路徑名稱
在定義路徑規則的時候，如果你給它提供了一個name屬性，則可以在後續使用這條路徑規則的時候，直接引用。
?| 123456 | router.map({'/user/:userId': {name: 'user',component: {...}}}); |
在v-link中使用
?| 1 | <a v-link="{name: 'user', params: {userId: 1}">This is a user whose id is 1</a> |
還可以使用router.go()
?| 1 | router.go({name: 'user', params: {userId: 1}}); |
最終都會匹配到/user/1這條路徑上
路由選項
| 路由選項名 | 預設值 | 作用 |
|---|---|---|
| hashbang | true | 將路徑格式化為#!開頭 |
| history | false | 啟用HTML5 history模式，可以使用pushState和replaceState來管理記錄 |
| abstract | false | 使用一個不依賴於瀏覽器的瀏覽歷史虛擬管理後端。 |
| transitionOnLoad | false | 初次載入是否啟用場景切換 |
| saveScrollPosition | false | 在啟用html5 history模式的時候生效，用於後退操作的時候記住之前的滾動條位置 |
| linkActiveClass | "v-link-active" | 連結被點選時候需要新增到v-link元素上的class類,預設為active |
如，我想採用一個有路徑格式化並啟用Html5 history功能的路由器，則可以在路由器初始化的時候，指定這些引數：
?| 1234 | var router = new VueRouter({hashbang: true,history: true}); |
這裡只是做了一些簡單的介紹，最後，更多高階用法請參考官方文件。