導航鉤子是Vue路由中一種非常重要的機制，主要負責控制路由的跳轉及其所產生的效果。很多開發者經常會用到導航鉤子來控制路由的跳轉及其所對應的狀態變化，因為這樣的話，我們就可以將一些業務代碼集中在路由鉤子中，從而簡化我們的代碼。

本文就來介紹一個Vue導航鉤子的案例：防止用戶在未登錄的情況下直接跳轉到需要登錄后才能訪問的頁面。

在Vue中，我們使用Vue Router來管理所有的路由。而Vue Router提供了一系列鉤子函數，例如beforeEach用來用來處理全局的路由守衛，在進入路由前做一些判斷、處理或者跳轉。

router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token') // 獲取用戶token
if (to.meta.requireAuth && !token) { // 判斷是否需要登錄訪問
next({
path: '/login',
query: { redirect: to.fullPath } // 記錄重定向的頁面
})
} else {
next()
}
})

上面這段代碼就是針對我們的需求而編寫的Vue導航鉤子，其中主要使用了beforeEach函數。在beforeEach函數的回調函數中，我們首先獲取localStorage中的token，然后判斷當前路由是否需要登錄訪問，如果需要，則判斷用戶是否已經登錄。如果未登錄，則跳轉到登錄頁面，并記錄需要跳轉的頁面（通過query string的方式實現），否則直接進入目標頁面。

在上面的代碼中，我們需要注意一下token的獲取。這里我們使用localStorage來進行保存，目的是為了在不同的頁面中都可以獲取到用戶的token，從而做出相應的判斷和跳轉。

除了上述的Vue導航鉤子之外，Vue Router還提供了很多其他的路由鉤子，例如beforeResolve、afterEach、beforeRouteLeave等。這些路由鉤子都具有不同的使用場景，針對不同的應用場景我們可以選擇不同的鉤子來進行使用。

總的來說，導航鉤子不僅是Vue路由中非常重要的機制，而且在我們的實際應用開發中也經常會使用到。通過使用導航鉤子，我們可以更加方便地進行路由的訪問控制和狀態管理，從而提高應用的開發效率和質量。