在Vue應用程序中，路由切換的監聽是非常重要的一個功能。這個功能可以幫助我們實現很多自定義的需求，例如當用戶切換路由時自動打開一個模態框，或者當用戶嘗試離開當前路由時提示用戶是否保存數據等等。Vue提供了非常便捷的路由監聽事件，我們只需要在路由實例上綁定相應的事件即可。

// 綁定路由切換前事件
router.beforeEach((to, from, next) =>{
// to: 跳轉的目標路由對象
// from: 跳轉前的路由對象
// next: 跳轉到目標路由的函數
})
// 綁定路由切換后事件
router.afterEach((to, from) =>{
// to: 跳轉的目標路由對象
// from: 跳轉前的路由對象
})

在上述代碼中，我們使用了Vue的路由實例router來綁定了兩個事件：beforeEach和afterEach。顧名思義，beforeEach表示在路由切換前觸發的事件，afterEach表示在路由切換后觸發的事件。

在beforeEach事件中，我們可以實現一些需要在路由跳轉前進行的操作，例如檢查用戶是否登錄、判斷用戶是否有權限進入該路由等等，如果某個條件不滿足，可以使用next函數中止路由切換，例如：

// 判斷用戶是否登錄
if (!localStorage.getItem('token')) {
// 用戶未登錄，跳轉到登錄頁面
next('/login')
} else {
// 用戶已登錄，繼續路由切換
next()
}

在afterEach事件中，我們可以實現一些需要在路由跳轉后進行的操作，例如更新頁面標題、統計PV（頁面訪問量）等等。在afterEach事件中，我們可以獲取到最新的路由對象to和切換前的路由對象from，從而實現一些有用的操作，例如：

// 更新頁面標題
document.title = to.meta.title
// 統計PV
let pv = localStorage.getItem('pv') || 0
pv++
localStorage.setItem('pv', pv)

除了beforeEach和afterEach事件外，Vue的路由實例還提供了許多其他事件，例如路由切換開始前事件、路由匹配失敗事件、路由加載完成事件等等。在實際開發中，我們可以根據具體的需求來選擇綁定相應的事件。

總之，Vue的路由切換監聽功能非常強大，可以幫助我們實現許多自定義的需求。不論是在路由切換前還是切換后，我們都可以使用Vue提供的路由實例綁定相應的事件，從而實現我們想要的功能。