溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡介
主要用來通過跳轉或取消的方式守衛導航。
例如判斷登錄信息：沒登錄全部跳到登錄頁。判斷必要操作是否進行沒進行的話中斷跳轉。
分為三大類：全局守衛、路由守衛、組件守衛
全局守衛
beforeEach beforeResolve afterEach
路由守衛
beforeEnter
組件守衛
beforeRouteEnter
// 在渲染該組件的對應路由被 confirm 前調用
// 不！能！獲取組件實例 `this`
// 因為當守衛執行前，組件實例還沒被創建
雖然無法直接獲取組件實力
但是我們可以通過next參數的回調函數獲取到當前實例進行操作
beforeRouteEnter: (to, from, next) => {
next((vm) => {
//vm就是當前組件實例
});
}
beforeRouteUpdate
// 在當前路由改變，但是該組件被復用時調用
// 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
// 可以訪問組件實例 `this`
beforeRouteLeave
// 導航離開該組件的對應路由時調用
// 可以訪問組件實例 `this`
參數介紹
這些導航守衛涉及到的參數：to、from、next
除了全局守衛的afterEach只有to和from外其余都有三個參數
（摘抄自官網）
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。
運行機制
以上就是本次給大家介紹的關于VueRouter導航守衛的全部知識，希望我們整理的內容對你有用，感謝你對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
