目錄
一、什么是Vue路由導航守衛？
二、全局守衛
1、beforeEach
下面是一個beforeEach的示例代碼：
2、beforeResolve
下面是一個beforeResolve的示例代碼：
3、afterEach
下面是一個afterEach的示例代碼：
三、路由獨享守衛
1、beforeEnter
下面是一個beforeEnter的示例代碼：
2、afterEnter
下面是一個afterEnter的示例代碼：
四、組件內守衛
1、beforeRouteEnter
下面是一個beforeRouteEnter的示例代碼：
2、beforeRouteUpdate
下面是一個beforeRouteUpdate的示例代碼：
3、beforeRouteLeave
下面是一個beforeRouteLeave的示例代碼：
五、總結
?
一、什么是Vue路由導航守衛？
Vue路由導航守衛是Vue Router提供的一種機制，它可以讓你在路由跳轉之前或之后執行一些自定義邏輯，例如：鑒權、重定向等。守衛分為全局守衛、路由獨享守衛和組件內守衛。
二、全局守衛
全局守衛作用于所有路由，包括進入路由、離開路由、進入子路由和離開子路由。全局守衛有三個：beforeEach、beforeResolve和afterEach。
1、beforeEach
beforeEach在路由跳轉之前被調用，它接收三個參數：to、from和next。
to：即將進入的路由對象；from：當前導航正要離開的路由對象；next：函數，必須調用next()來resolve鉤子。
下面是一個beforeEach的示例代碼：
router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !user.isLoggedIn) { // 鑒權next({path: '/login', // 重定向到登錄頁query: {redirect: to.fullPath} // 保存跳轉路徑})} else {next() // 繼續跳轉}
})上面的代碼中，我們使用了to.meta.requiresAuth來判斷該路由是否需要鑒權，如果需要鑒權且用戶沒有登錄，則將用戶重定向到登錄頁，并通過query參數記錄下用戶原本想要跳轉的路徑。
2、beforeResolve
beforeResolve是在導航被確認之前被調用，它接收一個參數：to。
to：即將進入的目標路由對象。
下面是一個beforeResolve的示例代碼：
router.beforeResolve((to) => {console.log('正在進入', to.name || to.path)
})上面的代碼中，我們使用了to.name || to.path來獲取路由的名稱或路徑，并在控制臺輸出正在進入的路由名稱或路徑。
3、afterEach
afterEach在路由跳轉之后被調用，它接收兩個參數：to和from。
to：即將進入的路由對象；from：當前導航正要離開的路由對象。
下面是一個afterEach的示例代碼：
router.afterEach((to, from) => {console.log('從', from.name || from.path, '跳轉到', to.name || to.path)
})上面的代碼中，我們使用了from.name || from.path和to.name || to.path來獲取路由的名稱或路徑，并在控制臺輸出從哪個路由跳轉到哪個路由了。
三、路由獨享守衛
路由獨享守衛作用于單個路由，它們在路由配置中定義。路由獨享守衛有兩個：beforeEnter和afterEnter。
1、beforeEnter
beforeEnter在路由切換前被調用，它接收三個參數：to、from和next。
to：即將進入的路由對象；from：當前導航正要離開的路由對象；next：函數，必須調用next()來resolve鉤子。
下面是一個beforeEnter的示例代碼：
const routes = [{path: '/dashboard',component: Dashboard,beforeEnter: (to, from, next) => {if (user.isAdmin) { // 鑒權next() // 繼續跳轉} else {next('/forbidden') // 跳轉到禁止訪問頁}}}
]上面的代碼中，我們使用了user.isAdmin來判斷用戶是否是管理員，如果是管理員則可以訪問/dashboard路由，否則跳轉到/forbidden路由。
2、afterEnter
afterEnter在路由切換后被調用，它接收一個參數：to。
to：即將進入的目標路由對象。
下面是一個afterEnter的示例代碼：
const routes = [{path: '/dashboard',component: Dashboard,afterEnter: (to) => {console.log(to.name || to.path, '已進入')}}
]上面的代碼中，我們使用了to.name || to.path來獲取路由的名稱或路徑，并在控制臺輸出已進入該路由。
四、組件內守衛
組件內守衛作用于單個組件，它們與全局守衛和路由獨享守衛不同的是，它們不需要在路由配置中定義，而是在組件內定義。
1、beforeRouteEnter
beforeRouteEnter在路由進入組件前被調用，它接收三個參數：to、from和next。
to：即將進入的路由對象；from：當前導航正要離開的路由對象；next：函數，必須調用next()來resolve鉤子。
下面是一個beforeRouteEnter的示例代碼：
export default {beforeRouteEnter(to, from, next) {if (user.hasPermission) { // 鑒權next() // 繼續進入該組件} else {next(false) // 禁止進入該組件}}
}上面的代碼中，我們使用了user.hasPermission來判斷用戶是否有權限進入該組件，如果有權限則進入該組件，否則禁止進入該組件。
2、beforeRouteUpdate
beforeRouteUpdate在路由進入組件后，組件復用時被調用，它接收兩個參數：to和from。
to：即將進入的路由對象；from：當前導航正要離開的路由對象。
下面是一個beforeRouteUpdate的示例代碼：
export default {beforeRouteUpdate(to, from) {console.log('從', from.name || from.path, '到', to.name || to.path)}
}上面的代碼中，我們使用了from.name || from.path和to.name || to.path來獲取路由的名稱或路徑，并在控制臺輸出從哪個路由跳轉到哪個路由了。
3、beforeRouteLeave
beforeRouteLeave在路由離開組件時被調用，它接收兩個參數：to和from和next。
to：即將進入的路由對象；from：當前導航正要離開的路由對象；next：函數，必須調用next()來resolve鉤子。
下面是一個beforeRouteLeave的示例代碼：
export default {beforeRouteLeave(to, from, next) {if (shouldLeave) { // 確認是否離開next() // 繼續離開} else {next(false) // 禁止離開}}
}上面的代碼中，我們使用了shouldLeave來判斷用戶是否要離開該組件，如果要離開則繼續離開，否則禁止離開。
五、總結
Vue路由導航守衛是Vue Router提供的一種機制，可以讓你在路由跳轉之前或之后執行一些自定義邏輯，例如：鑒權、重定向等。守衛分為全局守衛、路由獨享守衛和組件內守衛，每種守衛都有自己的使用場景。在使用守衛時，需要注意它們的執行順序和next函數的使用，避免出現無限循環的情況。
)