vue - Vue路由(擴充套件)

10發表於2022-05-15

忙裡偷閒,還在學校,趁機把後面的路由多出來的知識點學完

十.快取路由元件

讓不展示的路由元件保持掛載,不被銷燬

在我們的前面案例有一個問題,都知道vue的路由當我們切換一個路由後,另一個路由就會被銷燬,如果我在一個路由寫了有一些input框

image-20220514194518515

當我切換到另一個元件message很明顯這個時候news裡面的內容就會丟失,畢竟都被銷燬了,以前說過的專門用來儲存舊dom的$el這些都會被銷燬,而再掛載的時候沒有可以複用的就會直接生成新的DOM,所以當我們切換回來就是一個全新的input框

那麼有沒有辦法能夠解決這個問題,畢竟類似於這樣的情況,大多數都是能夠記住input裡面的內容切換回來也還是這樣

用到一個全新的標籤將我們的 input所在的元件的router-view標籤加入到裡面去

image-20220514230254633

注意這裡面可以寫一個屬性include,不寫的話就預設所有這裡展現的路由元件都會快取,但是沒得這個必要,其他元件沒有input,也不需要快取的話,可以加include屬性值為 那個元件的name既可以專門快取這一個元件的內容

image-20220514230722648

image-20220514230733022

快取多個路由元件,將include動態繫結,然後寫一個陣列的形式

image-20220514232135960

十一.兩個新的生命週期鉤子

像我們上面的案例接著來,如果我新增了一個news元件裡面的內容,讓他的opacity動態變化

image-20220514233611212

這個時候你會發現,就算你切走了,還是在輸出,因為根本沒有銷燬,一直掛載起的,這個時候這樣一直掛載起又有點沒有必要了,因為我都看不到那邊的情況,就算你幫我快取資料,我也看不到,更沒必要一直給我開啟定時器

兩個全新的而且只有路由能用的鉤子:一個是 activated 當前這個路由元件被啟用時被呼叫的生命週期鉤子,一個是deactivated是路由元件失活時被呼叫,所以這個時候呼叫這兩個鉤子比mounted和brforeDestroy要好得多

image-20220515101841393

十二.路由守衛

1.全域性前置路由守衛

新增一個需求,前面的案例當我切換home和about正常切換,但是切換home裡面的message和news的時候需要許可權,也就是好像一個守衛一樣守著這個關卡認證不對不會給你放行。

比如我在localStorage放入一個user,只有當user為admin的時候才可以點選news和message

image-20220515102359322

全域性體現在哪,體現在我是對整個router進行的設定。

這個守衛需要放在router,所以在配置檔案裡面不能直接匯出,前置體現在哪?一個路由的方法 .beforeEach,意思是在每一次切換之前,她在兩種情況下呼叫,一個是每一次切換之前,一個是初始化的時候,注意是切換之前,也就是剛好點選切換但是還沒切換過去這一個節點,他會接受三個引數,to是你點選要去的路由元件,from是你來自於哪個元件,還有一個next也是必須要寫的,所有的點選切換路由元件,都會被這個守衛攔截到,如果不寫next的話,就不會給你放行所以就實現不了切換

image-20220515102953812

既然拿到了這些引數,那就可以做一些判斷了,只有當我們想要訪問news或者message才會去繼續判斷你的user是否是admin,如果都滿足才會執行next,如果不是切換的這兩個元件,該放行的就放行

image-20220515104026527

但是這樣寫也不好,就像那個path地址,雖然也可以寫 to.name,但是如果要十多個路由元件都需要鑑權呢?在我們每一個$route裡面有一個屬性 meta它是一個物件,叫做路由元資訊,他就是專門用來存放一些我們自定義的資料的,我們可以把需要鑑權的路由元件都新增一個這個配置項,統一為isAuth值為true,我們守衛判斷的時候判斷這個是否為true就可以了

image-20220515104754896

image-20220515104910465

2.全域性後置路由守衛

它的觸發事件首先也是初始化的時候,還有一個就是切換完後進行觸發。

因為都已經切換完了,也沒什麼事情可以做了,所以這個守衛一般用的也比較少,有一種情況需要用到這個守衛,就是當我們單擊了一個路由元件後,我們的網頁標題會出現一些與之相關的title,需要在每一個路由元件的meta路由元資訊新增各自的標題

image-20220515110303153

如果用前置來做也可以做,點選誰顯示誰的title,如果有就顯示,但是根目錄沒有用異或語法顯示後一個

image-20220515110617523

但是這樣還是有一個bug,就是初試化才進來的時候還是有一瞬間顯示的是你index定義的title,所以為了徹底應該在index把title改了

image-20220515110751277

但是用前置做就很麻煩,為了不出現bug還要寫兩次,而路由就很簡單了,直接 afterEach,並且它的引數 只有兩個to,from,因為都已經切換完了也不需要繼續放心做什麼了,他就只需要在裡面寫上我們換標題的語句,因為所有的驗證都已經在前置路由守衛做完了,到後置了說明已經過鑑權了,直接換就可以了

image-20220515111138719

3.獨享路由守衛

顧名思義就是一個路由元件獨享的路由守衛,怎麼來觸發,除了初始化之後,就是當我切換進設定的這個路由元件之前,配置在這個路由配置項裡面 beforeEnter ,他也跟前置守衛一樣有三個引數

image-20220515112620274

可以跟全域性後置配合換title,但是要注意獨享路由守衛沒有 後置

4.元件內路由守衛

顧名思義寫在元件裡面的路由守衛,就不寫在router配置檔案裡面了。

分別是 beforeRouteEnter通過觸發規則進入該元件被觸發 beforeRouteLeave通過路由規則離開這個路由守衛時觸發,為什麼一定是通過路由規則,只有當router匹配的完成的切換才會被觸發,如果是當一般元件直接匯入使用元件標籤的這種元件不會被觸發,當你想單獨對這個路由元件來點業務邏輯可以在這裡,跟獨享路由守衛一樣的,但是區別於前值和後置,而且改名還是要配合全域性後置才能完成

image-20220515142033525

十三.history與hash模式

  • 區別一: 也就是我們瀏覽器上的的路徑,hash是帶#的,history不帶#要好看一點

image-20220515144714290

image-20220515144801622

怎麼來切換呢,直接修改router配置檔案,一個配置項 mode:為你想要的模式

image-20220515144839931

  • 區別二:history比hash相容性略差

  • 區別三:專案上線問題

    假如我現在用的history模式想要專案上線了,首先要執行run serve build將專案打包,打包好的檔案需要伺服器環境才能上線展示建立一個獨立的環境,node初始化,然後匯入express,通過express內建中介軟體static,將我們的專案靜態資源掛載上去

    部署上線後會發現,確實路徑挺好看,正常點也沒問題

    image-20220515150803275

    但是當你重新整理後,就會報錯

    image-20220515150823659

    為什麼會找不到這個請求,一般出現這個問題,都是找不到伺服器裡面這個路徑的資源或者一些語法錯誤,這裡的問題就是如果用的history模式,當你重新整理的時候就會觸發網路請求,去伺服器請求這個路徑的資源,但是伺服器根本沒有這個路徑,所以就會報錯,歸根結底還是因為用的history模式錯把後面的路徑當成了請求地址

    同樣的操作,我用hash打包來測試,重新整理就不會這樣,因為#後面的不會通過http帶給伺服器,就算你重新整理發起的網路請求還是根路徑,也就是你靜態託管出來的資源地址

    image-20220515151327346

當然想要用history模式並且能分別出誰是路由匹配的路徑,誰才是真正的伺服器路徑也可以,只是針對於node伺服器,可以下載第三方包:connect-history-api-fallback

然後匯入並且一定要在靜態託管之前註冊即可

image-20220515152309349

相關文章