Vue-router是一款Vue.js官方的路由管理插件，它可以讓我們輕松地實現SPA單頁面應用的路由管理，以及在不同的頁面之間切換時的動畫效果。在Vue-router中，我們可以使用deactivate來監聽某個路由頁面是否離開，這個函數的使用方式也很簡單，可以直接在Vue-router的路由表中添加deactivate函數。

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) =>{
// ...
})

首先我們需要明確一點的是，deactivate函數只有在從當前路由頁面離開時才會調用。如果我們在當前路由頁面執行了跳轉到另一個路由頁面的操作，而并沒有真正離開當前頁面，那么deactivate函數是不會被調用的。因此，我們需要在beforeRouteLeave函數中執行一些操作。

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()
}
}
},

當我們的路由切換時，Vue-router會自動調用beforeEach和afterEach這兩個函數，這兩個函數都是全局路由鉤子函數，可以監聽全局的路由變化。beforeEach函數會在路由跳轉開始前被調用，如果我們需要在路由跳轉前做一些操作，比如驗證用戶是否登錄、確認頁面離開等，都可以在這個函數中完成；而afterEach函數會在路由跳轉完成后被調用，我們可以在這個函數中做一些跳轉后的數據處理、頁面初始化等操作。

除了全局路由鉤子函數外，我們還可以通過在路由表中添加beforeEnter和beforeLeave函數來實現在路由進入和離開某個頁面時做一些操作。這些函數的使用方式與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) =>{
// ...
}
}
]
}
]
})

最后需要注意一點的是，如果我們要使用beforeRouteLeave函數監聽頁面離開，那么我們需要將這個函數定義在需要監聽的組件中，而不能使用全局路由鉤子函數。