vue2路由導航守衛(鈎子函數)


所謂的Vue路由導航守衛,也就是我們常說的生命周期鈎子函數,鈎子函數的意思就是在特定的時刻,Vue會自動觸發這個方法,我們可以通過這些個鈎子函數,實現一些功能,比如,某些頁面需要登錄后才可以訪問,某些頁面需要用戶達到什么等級才可以訪問,又或者是跳轉頁面后修改一些信息等等,我們就可以通過路由導航守衛來攔截並做相應的處理

全局守衛:

掛載在router實例上

全局前置鈎子

注意:參數或查詢的改變並不會觸發進入/離開的導航守衛。你可以通過觀察 $route 對象來應對這些變化,或使用 beforeRouteUpdate 的組件內守衛。

 

 

官方對於next()的解釋:

next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了,則導航的狀態就是 confirmed (確認的)。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕),那么 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷,然后進行一個新的導航。你可以向 next 傳遞任意位置對象,且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。
next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例,則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

 

 

  • 全局后置鈎子:

注意:這些鈎子不會接受next函數,也不會改變導航本身

 

 

局部鈎子函數

局部鈎子函數可以寫在兩個地方,一個是寫在組件對應的路由配置中,一個是直接寫在組件中

路由獨享的守衛:

可以在路由配置上直接定義beforeEnter守衛:

 

 

組件內的守衛:

  1. beforeRouteEnter
  2. beforeRouteUpdata(2.2新增)
  3. beforeRouteLeave

 

 

 

 

beforeRouteEnter 守衛不能訪問this,因為守衛在導航確認前被調用,因此即將登場的新組建還沒被創建

可以通過傳一個回調給next來訪問組件實例。在導航被確認的時候執行回調,並且把組件實例作為回調方法的參數

 

 

 

 

僅供參考 。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM