關於vue-router總結

一丶起步

1.使用router-link標籤進行路由跳轉

<router-link to="/foo">Go to Foo</router-link>

<!-- 路由匹配到的組件將渲染在這裏 --> <router-view></router-view>

2.當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active

二丶動態路由匹配

 

 

 

 

 

 

$route.matched

 

• 類型: Array<RouteRecord>

 

一個數組，包含當前路由的全部嵌套路徑片斷的 路由記錄 。路由記錄就是 routes 配置數組中的對象副本（還有在 children 數組）。

 

 

$route.name

 

當前路由的名稱，若是有的話。（查看 命名路由）

 

 

$route.hash

 

• 類型: string

  當前路由的 hash 值 (帶 #) ，若是沒有 hash 值，則爲空字符串。

 

 

$route.query

 

• 類型: Object

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

 

 

$route.params

 

• 類型: Object

 

一個 key/value 對象，包含了 動態片斷 和 全匹配片斷，若是沒有路由參數，就是一個空對象。

 

$route.path

 

• 類型: string

  字符串，對應當前路由的路徑，老是解析爲絕對路徑，如 "/foo/bar"。

 

 

 

三丶嵌套路由

 

四丶編程式導航

1.想要導航到不一樣的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，因此，當用戶點擊瀏覽器後退按鈕時，則回到以前的 URL。

 

當你點擊 <router-link> 時，這個方法會在內部調用，因此說，點擊 <router-link :to="..."> 等同於調用 router.push(...)。

該方法的參數能夠是一個字符串路徑，或者一個描述地址的對象。例如：

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

2.router.replace(location)

 

跟 router.push 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。

3.router.go(n)

這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，相似 window.history.go(n)。

 

九丶導航鉤子

1.router.beforeEach

 

組件內的鉤子

 

最後，你能夠在路由組件內直接定義如下路由導航鉤子：

 

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave