vue學習筆記(二) 路由學習

vue-router與vue.js深度集成，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。一般的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的，比如說a標籤，在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
路由中有三個基本的概念：

1. route，它是一條路由。Home按鈕=>home內容，這是一條route，about
   按鈕=>about內容，這是另一條路由。
2. router是一組路由，把上面的每一條路由組合起來，形成一個數組。
   [ {home 按鈕 =>home內容 }， { about按鈕 => about 內容} ]
   router 是一個機制，相當於一個管理者，它來管理路由。因爲routes 只是定義了一組路由，它放在哪裏是靜止的，當真正來了請求，怎麼辦？ 就是當用戶點擊home 按鈕的時候，怎麼辦？這時router 就起作用了，它到routes 中去查找，去找到對應的 home 內容，所以頁面中就顯示了 home 內容。
3. 路由在項目中的基本定義爲(文件router/index.js)：
   
   再通過來實現組件之間的跳轉。
   1.1 聲明式路由
   在頁面中通常使用這個標籤來實現頁面的跳轉，它屬於聲明式路由，相當於a標籤。
   如何帶值傳遞？
   
   用法：
   
   1.2 編程式路由
   在頁面中可以使用這個標籤來實現頁面的跳轉，還可以通過router的實例化方法來實現頁面的跳轉。
   1.2.1 router.push
   平時使用的實際上是調用router.push。
   具體的語法：
   router.push(location, onComplete?, onAbort?)
   在具體使用該方法時，在Vue實例內部，可以通過router來訪問路由的實例，項目中常用到的有(c,d爲傳參方式)：
   (a)this.router.push（‘/xxxx’） – 某一個路徑
   (b)this.router.push ({name : ‘xxxx’}) – 跳轉到某一個頁面
   ©this.router.push ({name : ‘xxxx’, query: xxx})
   (d)this.router.push ({name : ‘xxxx’, param: {userId: ‘xxxx’}}) --由於動態路由也是傳遞params的，所以在 this.router.push() 方法中 path不能和params一起使用，否則params將無效。需要用name來指定頁面。
   3與4的區別在於在頁面接收參數的方式不同：
   this.route.query.xxx
   this.route.param.xxx
   使用這個方法，它會向棧裏添加一條歷史記錄，所以在選擇回退時，它會回退到歷史頁面
   在項目中常見的場景是從一個單頁面回退到上一層頁面。
   
   1.2.2 router.replace
   語法：router.replace(location, onComplete?, onAbort?)
   這個跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是替換掉當前的 history 記錄。參數的傳遞與router.push相同。
   (1) 路由按需加載：
   爲了不影響頁面加載，如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣就很高效了
   我們一般定義路由：
   
   按需加載的寫法：
   
   1.2.3 router-view
   在App.vue中定義 router-view和 router-link,App.vue中定義router-view是必不可少的。
   
   項目中使用的場景：
   router-view 也可看做一個組件，結合 keep-alive 來，將所有匹配到的視圖組件進行緩存處理，避免重複加載。
   
   1.2.4 路由鉤子
   路由鉤子主要是在路由發生變化時進行一些特殊處理，總的來說，提供了三大類鉤子函數：
   (1) 全局鉤子
   (2) 某個路由獨享的鉤子
   (3) 組件內鉤子
   三種路由鉤子中都涉及到了三個參數：
   (1) to :Route:即將要進入的目標 路由對象
   (2) from :Route 當前導航正要離開的 路由
   (3) next : Function 一定要調用該方法來 resolve 這個鉤子。
   next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
   next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
   next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。
   next(error): 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。
   參考資料：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
   (1)全局鉤子：
   router. beforeEnter 與router.afterEach
   全局鉤子在main.js裏面調用，比如以下的場景，一個應用頁面返回上一頁面
   
   (2)某個路由獨享的鉤子
   
   這個沒有用過，以後用上了再補上
   (3)組件內鉤子
   組件內的鉤子可以在路由組件中直接定義一下路由導航守衛。
   a)beforeRouteEnter
   b)beforeRouteUpdate (2.2 新增)
   c)beforeRouteLeave
   在項目中主要用到的是beforeRouteLeave，它的使用場景我用到最多的爲：
   導航離開該組件的對應路由時，比如說從某頁面進入該編輯頁，當放棄編輯時，給出提示“信息未保存，是否編輯”。
   這裏用到了狀態管理store與vux，暫時忽略，現只看用法。