Vue是一款現代化的JavaScript框架，由于其簡單易上手，快速高效的開發特性，越來越受到前端開發者的喜愛。在Vue開發過程中，處理頁面切換邏輯是一個不可避免的問題。其中一項細節是如何在用戶離開頁面時觸發函數。

Vue提供了一個路由鉤子函數beforeRouteLeave，該函數會在用戶離開當前路由之前觸發。beforeRouteLeave需要在Vue組件中使用，首先需要在組件對象中定義路由鉤子函數，在其內部定義beforeRouteLeave。

export default {
name: 'myComponent',
methods: {
//在beforeRouteLeave中定義即將離開路由前觸發的函數
beforeRouteLeave(to, from, next) {
// 觸發函數的邏輯代碼...
next();
}
}
}

如上代碼所示，通過在組件方法中定義beforeRouteLeave函數，并設置接受三個參數to(from, next)，即可在用戶離開當前路由前觸發函數。

其中to和from分別代表Vue Router的目標路由和起始路由，next是一個回調函數，必須在處理完路由鉤子函數后調用，才能讓Vue Router繼續進行下一步路由操作。如果鉤子函數中沒有調用next函數，則當前路由將被阻止離開。

除了在組件中使用beforeRouteLeave函數外，Vue還提供了全局路由鉤子函數beforeEach和afterEach，它們同樣可以應用在路由切換時執行一些操作。

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
//全局路由鉤子函數beforeEach
beforeEach(to, from, next) {
// 觸發函數的邏輯代碼...
next();
},
//全局路由鉤子函數afterEach
afterEach(to, from) {
// 觸發函數的邏輯代碼...
}
})

以上代碼展示了在Vue Router中定義beforeEach和afterEach，同樣需要設置接受三個參數to(from, next)或to(from)。和beforeRouteLeave一樣，beforeEach和afterEach鉤子函數需要在處理完邏輯后調用next才能繼續執行路由操作。beforeEach可以在路由切換前執行一些操作，afterEach可以在路由切換成功后執行一些操作。

總體來說，Vue提供了多個路由鉤子函數以處理頁面切換時的相關邏輯操作。通過組件內部函數beforeRouteLeave可以實現局部邏輯控制，而通過全局路由鉤子函數beforeEach和afterEach可以實現全局邏輯控制，方便開發者自由使用。