Vue Router 學習筆記

1.路由的基本使用

　　HTML部分：

　　　　<router-link to="連接到的組件地址">給個名字</router-link>   （router-link默認會被渲染成一個a標籤）

　　　　---------------------------------------------------------------------

　　　　<router-view></router-view>  （路由出口，連接到到的組件會被顯示在這裏）

　　JavaScript部分：

　　　　0）若是使用模塊化機制編程，須要導入Vue和VueRouter，要調用Vue.user(VueRouter)

　　　　1）引入或定義須要使用的組件

　　　　2）定義路由 ：

                    

　　　　3）建立路由實例，設置配置參數

　　　　4）建立和掛在到根實例

2.動態路由

　　1）定義路由時路徑參數使用：，這樣router-link  中的路徑對應的內容會轉化爲參數，同時參數能夠在被調用的組件中經過route.params  得到

　　2）響應路由參數的變化：在 使用不一樣的router-link 調用組件時，組件有時須要監控路由參數的變化，可是因爲調用的是同一個路由，因此組件會被複用，組件聲明週期鉤子不會不從新調用，可使用watch 或者 beforeRouterUpdate  導航守衛來相應路由參數變化。 

　　3）捕獲全部路由或者404路由：*、 /user-*（以/user開頭的全部路由），使用通配符是能夠經過$.route.params 獲取到一個名爲pathMatch 的參數，包含被匹配到的部分。

　　4）高級匹配模式：vue-router 使用path-to-regexp做爲路徑匹配引擎，因此有不少高級的匹配模式。

　　5）匹配的優先級：優點一個路徑可能匹配到多個路由，這是哪一個路由先定義，就優先匹配到哪一個路由。

3.嵌套路由

　　在父級<router-view>中設置相應子路由連接到的組件的顯示出口<router-view>

　　children:[]設置子路由配置信息

4.編程式的路由 ：router.push()、router.replace()、router.go()

5.命名路由：路由可使用name屬性配置名稱，相應的<router-link to = "{name:路由名稱，params：{參數名稱：參數值，...}}">

6.命名視圖：在一個頁面有多個視圖顯示時，視圖能夠經過設置name屬性，在路由components配置中設置相應的組件視圖出口。

7.重定向和別名：重定向：redirect：重定向路徑

　　　　　　　　別名：alias：別名

8.經過路由給組件傳參：爲了減小路由和組件之間的耦合，路由中的參數能夠經過在組件中設置props給組件傳參

　　1）布爾模式：props設爲true ：route.params 會被設置爲組件屬性

　　2）對象模式：props爲對象，安裝對應的設置 設置屬性

　　3）函數模式：props能夠爲一個函數的返回值

6.history模式：爲了URL美觀，通常使用history模式，使用這種模式時須要在後端作一個URL覆蓋配置，若是URL匹配不到任何靜態資源時返回app依賴的index.html頁面。

 在Vue應用裏面覆蓋全部路由狀況，添加一個覆蓋全部路由的404頁面。