Vue Router是Vue.js官方路由管理器。它允許開發人員在單頁應用程序（SPA）中定義路由，其中每個URL在應用程序中映射到組件。Vue Router全局鉤子是在路由導航時通知開發人員的回調函數。這些鉤子可以讓您在路由切換前或后做出響應。

Vue Router全局鉤子包括路由守衛，這些守衛允許您在導航到特定路由或離開特定路由時執行代碼。路由守衛分為三種：

• 全局守衛（beforeEach，afterEach）
• 路由獨享的守衛（beforeEnter）
• 組件內的守衛（beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave）

全局守衛可以用于在導航到任何路由之前或之后執行代碼。beforeEach鉤子用于在導航到任何路由之前驗證用戶權限。如果用戶未登錄，則可以將其重定向至登錄頁面。afterEach鉤子可以用于在導航到路由后執行代碼。例如，您可以使用afterEach鉤子在Web分析平臺上記錄每個路由的使用情況。

router.beforeEach((to, from, next) =>{
if (!isAuthenticated && to.path !== '/login') {
next('/login')
} else {
next()
}
})
router.afterEach((to, from) =>{
analytics.track(to.path)
})

路由獨享的守衛用于在進入路由時執行代碼。beforeEnter鉤子用于在導航到路由之前進行數據加載或身份驗證。

const routes = [
{
path: '/dashboard',
component: Dashboard,
beforeEnter: (to, from, next) =>{
if (!isAuthenticated) {
next('/login')
} else {
next()
}
}
}
]

組件內的守衛用于在切換路由時在組件內處理邏輯。beforeRouteEnter鉤子用于在組件內訪問路由屬性或調用異步API之前執行代碼。beforeRouteUpdate鉤子用于在組件復用路由時執行代碼。beforeRouteLeave鉤子用于在組件離開路由時執行代碼。

export default {
beforeRouteEnter (to, from, next) {
if (to.params.id !== undefined) {
fetch(`/data/${to.params.id}`)
.then(data =>{
next(vm =>vm.setData(data))
})
} else {
next()
}
},
beforeRouteUpdate (to, from, next) {
if (to.params.id !== from.params.id) {
fetch(`/data/${to.params.id}`)
.then(data =>{
this.setData(data)
next()
})
} else {
next()
}
},
beforeRouteLeave (to, from, next) {
if (this.isDirty) {
const answer = confirm('Do you want to save changes?')
if (answer) {
this.saveChanges(() =>{
next()
})
} else {
next()
}
} else {
next()
}
},
// ...
}

總之，在Vue Router中，全局鉤子可用于在路由導航時執行代碼。您可以使用它們進行用戶身份驗證，記錄分析數據，預加載數據等。