vue - Vue路由（擴充套件）
忙裡偷閒，還在學校，趁機把後面的路由多出來的知識點學完
十.快取路由元件
讓不展示的路由元件保持掛載，不被銷燬
在我們的前面案例有一個問題，都知道vue的路由當我們切換一個路由後，另一個路由就會被銷燬，如果我在一個路由寫了有一些input框
當我切換到另一個元件message很明顯這個時候news裡面的內容就會丟失，畢竟都被銷燬了，以前說過的專門用來儲存舊dom的$el這些都會被銷燬，而再掛載的時候沒有可以複用的就會直接生成新的DOM，所以當我們切換回來就是一個全新的input框
那麼有沒有辦法能夠解決這個問題，畢竟類似於這樣的情況，大多數都是能夠記住input裡面的內容切換回來也還是這樣
用到一個全新的標籤
注意這裡面可以寫一個屬性include，不寫的話就預設所有這裡展現的路由元件都會快取，但是沒得這個必要，其他元件沒有input，也不需要快取的話，可以加include屬性值為 那個元件的name既可以專門快取這一個元件的內容
快取多個路由元件，將include動態繫結，然後寫一個數組的形式
十一.兩個新的生命週期鉤子
像我們上面的案例接著來，如果我添加了一個news元件裡面的內容，讓他的opacity動態變化
這個時候你會發現，就算你切走了，還是在輸出，因為根本沒有銷燬，一直掛載起的，這個時候這樣一直掛載起又有點沒有必要了，因為我都看不到那邊的情況，就算你幫我快取資料，我也看不到，更沒必要一直給我開啟定時器
兩個全新的而且只有路由能用的鉤子：一個是 activated 當前這個路由元件被啟用時被呼叫的生命週期鉤子，一個是deactivated是路由元件失活時被呼叫，所以這個時候呼叫這兩個鉤子比mounted和brforeDestroy要好得多
十二.路由守衛
1.全域性前置路由守衛
新增一個需求，前面的案例當我切換home和about正常切換，但是切換home裡面的message和news的時候需要許可權，也就是好像一個守衛一樣守著這個關卡認證不對不會給你放行。
比如我在localStorage放入一個user，只有當user為admin的時候才可以點選news和message
全域性體現在哪
這個守衛需要放在router，所以在配置檔案裡面不能直接匯出，前置體現在哪？一個路由的方法 .beforeEach,意思是在每一次切換之前，她在兩種情況下呼叫，一個是每一次切換之前，一個是初始化的時候，注意是切換之前，也就是剛好點選切換但是還沒切換過去這一個節點，他會接受三個引數，to是你點選要去的路由元件，from是你來自於哪個元件，還有一個next也是必須要寫的，所有的點選切換路由元件，都會被這個守衛攔截到，如果不寫next的話，就不會給你放行所以就實現不了切換
既然拿到了這些引數，那就可以做一些判斷了，只有當我們想要訪問news或者message才會去繼續判斷你的user是否是admin，如果都滿足才會執行next，如果不是切換的這兩個元件，該放行的就放行
但是這樣寫也不好，就像那個path地址，雖然也可以寫 to.name，但是如果要十多個路由元件都需要鑑權呢？在我們每一個$route裡面有一個屬性 meta它是一個物件，叫做路由元資訊，他就是專門用來存放一些我們自定義的資料的，我們可以把需要鑑權的路由元件都新增一個這個配置項，統一為isAuth值為true，我們守衛判斷的時候判斷這個是否為true就可以了
2.全域性後置路由守衛
它的觸發事件首先也是初始化的時候，還有一個就是切換完後進行觸發。
因為都已經切換完了，也沒什麼事情可以做了，所以這個守衛一般用的也比較少，有一種情況需要用到這個守衛，就是當我們單擊了一個路由元件後，我們的網頁標題會出現一些與之相關的title，需要在每一個路由元件的meta路由元資訊新增各自的標題
如果用前置來做也可以做，點選誰顯示誰的title，如果有就顯示，但是根目錄沒有用異或語法顯示後一個
但是這樣還是有一個bug，就是初試化才進來的時候還是有一瞬間顯示的是你index定義的title，所以為了徹底應該在index把title改了
但是用前置做就很麻煩，為了不出現bug還要寫兩次，而路由就很簡單了，直接 afterEach，並且它的引數 只有兩個to，from，因為都已經切換完了也不需要繼續放心做什麼了，他就只需要在裡面寫上我們換標題的語句，因為所有的驗證都已經在前置路由守衛做完了，到後置了說明已經過鑑權了，直接換就可以了
3.獨享路由守衛
顧名思義就是一個路由元件獨享的路由守衛，怎麼來觸發，除了初始化之後，就是當我切換進設定的這個路由元件之前，配置在這個路由配置項裡面 beforeEnter ,他也跟前置守衛一樣有三個引數
可以跟全域性後置配合換title，但是要注意獨享路由守衛沒有 後置
4.元件內路由守衛
顧名思義寫在元件裡面的路由守衛，就不寫在router配置檔案裡面了。
分別是 beforeRouteEnter通過觸發規則進入該元件被觸發 beforeRouteLeave通過路由規則離開這個路由守衛時觸發，為什麼一定是通過路由規則，只有當router匹配的完成的切換才會被觸發，如果是當一般元件直接匯入使用元件標籤的這種元件不會被觸發，當你想單獨對這個路由元件來點業務邏輯可以在這裡，跟獨享路由守衛一樣的，但是區別於前值和後置，而且改名還是要配合全域性後置才能完成
十三.history與hash模式
- 區別一： 也就是我們瀏覽器上的的路徑，hash是帶#的，history不帶#要好看一點
怎麼來切換呢，直接修改router配置檔案，一個配置項 mode：為你想要的模式
-
區別二：history比hash相容性略差
-
區別三：專案上線問題
假如我現在用的history模式想要專案上線了，首先要執行run serve build將專案打包，打包好的檔案需要伺服器環境才能上線展示建立一個獨立的環境，node初始化，然後匯入express，通過express內建中介軟體static，將我們的專案靜態資源掛載上去
部署上線後會發現，確實路徑挺好看，正常點也沒問題
但是當你重新整理後，就會報錯
為什麼會找不到這個請求，一般出現這個問題，都是找不到伺服器裡面這個路徑的資源或者一些語法錯誤，這裡的問題就是如果用的history模式，當你重新整理的時候就會觸發網路請求，去伺服器請求這個路徑的資源，但是伺服器根本沒有這個路徑，所以就會報錯，歸根結底還是因為用的history模式錯把後面的路徑當成了請求地址
同樣的操作，我用hash打包來測試，重新整理就不會這樣，因為#後面的不會通過http帶給伺服器，就算你刷新發起的網路請求還是根路徑，也就是你靜態託管出來的資源地址
當然想要用history模式並且能分別出誰是路由匹配的路徑，誰才是真正的伺服器路徑也可以，只是針對於node伺服器，可以下載第三方包：connect-history-api-fallback
然後匯入並且一定要在靜態託管之前註冊即可