所謂的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守衛:
組件內的守衛:
- beforeRouteEnter
- beforeRouteUpdata(2.2新增)
- beforeRouteLeave
beforeRouteEnter 守衛不能訪問this,因為守衛在導航確認前被調用,因此即將登場的新組建還沒被創建
可以通過傳一個回調給next來訪問組件實例。在導航被確認的時候執行回調,並且把組件實例作為回調方法的參數
僅供參考 。