Vue-router是一款Vue.js官方的路由管理插件，它可以讓我們輕松地實(shí)現(xiàn)SPA單頁(yè)面應(yīng)用的路由管理，以及在不同的頁(yè)面之間切換時(shí)的動(dòng)畫(huà)效果。在Vue-router中，我們可以使用deactivate來(lái)監(jiān)聽(tīng)某個(gè)路由頁(yè)面是否離開(kāi)，這個(gè)函數(shù)的使用方式也很簡(jiǎn)單，可以直接在Vue-router的路由表中添加deactivate函數(shù)。

import router from './router'
router.beforeEach((to, from, next) =>{
if (to.meta.requiresAuth && !Auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
})
router.beforeEach((to, from, next) =>{
// ...
})
router.afterEach((to, from) =>{
// ...
})
router.beforeResolve((to, from, next) =>{
// ...
})
router.afterEach((to, from) =>{
// ...
})

首先我們需要明確一點(diǎn)的是，deactivate函數(shù)只有在從當(dāng)前路由頁(yè)面離開(kāi)時(shí)才會(huì)調(diào)用。如果我們?cè)诋?dāng)前路由頁(yè)面執(zhí)行了跳轉(zhuǎn)到另一個(gè)路由頁(yè)面的操作，而并沒(méi)有真正離開(kāi)當(dāng)前頁(yè)面，那么deactivate函數(shù)是不會(huì)被調(diào)用的。因此，我們需要在beforeRouteLeave函數(shù)中執(zhí)行一些操作。

mounted: function () {
this.$router.beforeEach((to, from, next) =>{
if (from.path === '/profile' && to.path !== '/login') {
this.confirmLeave(next)
} else {
next()
}
})
},
methods: {
confirmLeave: function (next) {
if (confirm('Do you really want to leave?')) {
next()
}
}
},

當(dāng)我們的路由切換時(shí)，Vue-router會(huì)自動(dòng)調(diào)用beforeEach和afterEach這兩個(gè)函數(shù)，這兩個(gè)函數(shù)都是全局路由鉤子函數(shù)，可以監(jiān)聽(tīng)全局的路由變化。beforeEach函數(shù)會(huì)在路由跳轉(zhuǎn)開(kāi)始前被調(diào)用，如果我們需要在路由跳轉(zhuǎn)前做一些操作，比如驗(yàn)證用戶是否登錄、確認(rèn)頁(yè)面離開(kāi)等，都可以在這個(gè)函數(shù)中完成；而afterEach函數(shù)會(huì)在路由跳轉(zhuǎn)完成后被調(diào)用，我們可以在這個(gè)函數(shù)中做一些跳轉(zhuǎn)后的數(shù)據(jù)處理、頁(yè)面初始化等操作。

除了全局路由鉤子函數(shù)外，我們還可以通過(guò)在路由表中添加beforeEnter和beforeLeave函數(shù)來(lái)實(shí)現(xiàn)在路由進(jìn)入和離開(kāi)某個(gè)頁(yè)面時(shí)做一些操作。這些函數(shù)的使用方式與beforeEach和afterEach類似，不同之處在于前兩者是全局的，后兩者是局部的。

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile,
beforeEnter: (to, from, next) =>{
// ...
}
},
{
path: 'posts',
component: UserPosts,
beforeEnter: (to, from, next) =>{
// ...
}
}
]
}
]
})

最后需要注意一點(diǎn)的是，如果我們要使用beforeRouteLeave函數(shù)監(jiān)聽(tīng)頁(yè)面離開(kāi)，那么我們需要將這個(gè)函數(shù)定義在需要監(jiān)聽(tīng)的組件中，而不能使用全局路由鉤子函數(shù)。