Vue 監聽路由守衛，是通過監聽路由變化來實現對組件的管理和控制。在 Vue 中，我們可以使用路由守衛對頁面進行更細致的管理。

Vue Router 提供了一些特殊的函數來監聽路由的變化。

router.beforeEach((to, from, next) =>{
// to 和 from 都是獲得路徑，next 是一個函數，通過調用它來確保路由成功跳轉
next()
})

在上述代碼中，beforeEach 函數會在路由切換前執行，to 獲取了新的路由路徑，from 獲取了舊的路由路徑，next 是一個函數，用來確保當前路由成功跳轉。

同時，我們還可以在 Vue 組件中使用 watch 監聽路由變化：

watch: {
$route(to, from) {
// to 獲取新的路由路徑，from 獲取舊的路由路徑
// 添加自己的邏輯代碼
}
}

在上述代碼中，我們使用了 Vue 的 watch 功能，通過監聽 $route 的變化，來執行自己的邏輯代碼。

除了監聽路由變化，還有一些其他的路由守衛可以被使用，可以讓我們更好地控制組件的生命周期。

比如說，beforeEach 函數，可以用來在路由切換前執行一些操作，比如判斷用戶是否登錄，如果沒有登錄則跳轉到登錄頁面。

router.beforeEach((to, from, next) =>{
if(to.path === '/login') {
next();
} else {
let token = localStorage.getItem('token');
if(token === null || token === '') {
next('/login');
} else {
next();
}
}
});

在上述代碼中，我們使用了 beforeEach 函數，來判斷用戶是否登錄。如果用戶沒有登錄，則跳轉到登錄頁面，否則繼續執行路由切換。

在路由切換完成之后，還可以使用 afterEach 函數來執行一些操作，比如記錄用戶的訪問記錄。

router.afterEach((to, from) =>{
let visitRecord = localStorage.getItem('visitRecord') || '[]';
visitRecord = JSON.parse(visitRecord);
visitRecord.push({
to: to.path,
from: from.path,
time: new Date().getTime()
});
localStorage.setItem('visitRecord', JSON.stringify(visitRecord));
});

在上述代碼中，我們使用了 afterEach 函數，來記錄用戶的訪問記錄。每次用戶訪問一個新頁面時，都會將當前頁面的路徑、上一個頁面的路徑、以及訪問時間記錄在 localStorage 中。

總結來說，Vue 的路由守衛功能，可以幫助我們更好地管理和控制頁面組件。通過監聽路由變化，可以在頁面切換前后執行自己的邏輯代碼，可以讓我們更好地掌控組件的生命周期。