Vue.js 中的路由導航守衛是 Vue Router 提供的一套機制，用于在路由切換的過程中執行自定義代碼邏輯，包括但不限于權限驗證、頁面滾動位置保存、加載數據等。它分為三種類型：
- 全局前置守衛 (Global beforeEach Guard)
全局前置守衛應用在整個應用程序的路由跳轉之前，不論你訪問任何路由都會觸發。注冊全局前置守衛通過調用 router.beforeEach 方法，并傳入一個回調函數。這個回調函數接收三個參數：
to: Route: 即將要進入的目標路由對象。
from: Route: 當前導航正要離開的路由對象。
next: Function: 調用該函數進行下一步操作。它可以接受一個可選的參數（通常是一個錯誤對象），決定是否以及如何繼續導航流程。
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';const router = createRouter({history: createWebHistory(),routes,
});router.beforeEach((to, from, next) => {// 在這里可以執行異步操作，例如檢查用戶登錄狀態if (!isAuthenticated) {next('/login');} else {next();}
});
- 全局解析守衛 (Global afterEach Guard)
除了前置守衛，Vue Router 還提供了全局后置守衛 (router.afterEach)，這個守衛會在每次導航完成，即將激活組件渲染之后觸發，但不涉及阻止或更改導航過程。
router.afterEach((to, from) => {// 可以在這里記錄路由歷史、頁面瀏覽統計等操作
});
- 路由獨享守衛 (Per-Route Guard)
可以在單個路由配置中定義前置守衛和/或后置守衛，這些守衛僅針對特定路由生效：
{path: '/admin',component: AdminPanel,beforeEnter: (to, from, next) => {// 執行特定于 /admin 路由的權限檢查或其他操作if (canAccessAdmin()) {next();} else {next({ name: 'access-denied' });}},
}
- 組件內的守衛 (In-Component Guards)
在單個路由組件內，有三種類型的守衛：
beforeRouteEnter: 組件實例還未創建時就已存在的守衛，不能直接訪問組件實例，可以通過 next(vm => {}) 訪問組件實例并傳遞給回調函數。
export default {beforeRouteEnter(to, from, next) {next(vm => {vm.title = to.meta.title; // 設置組件標題});},
};
beforeRouteUpdate: 當路由的 params 或 query 發生變化（即當前路由路徑不變，只有參數變化）時觸發，此時可以直接訪問組件實例。
export default {beforeRouteUpdate(to, from, next) {this.loadData(to.params.id); // 更新組件數據next();},
};
beforeRouteLeave: 導航離開當前路由時觸發，可以用來確認是否允許離開。
export default {data() {return {unsavedChanges: false,};},methods: {confirmNavigation() {// 用戶確認邏輯...},},beforeRouteLeave(to, from, next) {if (this.unsavedChanges) {this.confirmNavigation().then(() => next()).catch(() => next(false));} else {next();}},
};
)
（九）)
)
