Vue系列：Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基於組件的路由配置
• 路由參數、查詢、通配符
• 基於 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的連接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行爲

 

1.動態路由

動態路由，能夠將某種模式匹配到的全部路由，並全都映射到同個組件。

（通俗點，好比根據不一樣的參數 id 落地到同一個詳情頁組件，就能夠考慮使用它）

 

路由配置

 

路由使用

 

值得注意的是，當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。

由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。

 

能夠使用 watch 和組件內的 beforeRouteUpdate 守衛來監聽動態參數的變化，並作響應。

 

2.嵌套路由

經過嵌套路由能夠在當前頁面上，經過點擊配置的嵌套子路由，展現不一樣界面。（例如常見的頁面內子導航，就能夠考慮使用嵌套路由來實現）

 

路由配置

 

路由使用

 

3.編程式導航

一種更簡潔的路由跳轉方式，更靈活與方便。使用方法 router.push、 router.replace 和 router.go等，效仿了 window.historyAPI 

 

使用方式