在構建單頁面應用時，路由守衛是一個非常重要的概念。它允許我們在路由進入或離開時執行一些操作，比如驗證用戶權限、處理數據加載、執行導航確認等。Vue Router提供了多種類型的路由守衛，使我們能夠靈活地控制路由的行為。在今天的學習中，我們將重點探討以下內容：

1. 路由守衛概述
2. 全局守衛
3. 路由獨享守衛
4. 組件內守衛
5. 動態路由守衛
6. 使用實際示例理解路由守衛
7. 總結與實踐

1. 路由守衛概述

路由守衛是指在路由確認的過程中執行的一些鉤子函數，用于控制路由的訪問及處理。在Vue Router中，主要有以下幾種路由守衛：

• 全局守衛：在所有路由變化前后生效。
• 路由獨享守衛：只在特定路由的變化時生效。
• 組件內守衛：在組件的生命周期中執行的守衛。

通過這些守衛，你可以放心地控制用戶訪問權限、加載數據、顯示loading等狀態。

2. 全局守衛

全局守衛是在創建路由實例時通過?router.beforeEach?和?router.afterEach?方法定義的。beforeEach?會在每次路由切換前執行，而?afterEach?則在路由切換后執行。

示例

javascript

// main.js
import { createRouter, createWebHistory } from 'vue-router';
import store from './store'; // 引入Vuex Storeconst routes = [/* 定義路由 */
];const router = createRouter({history: createWebHistory(),routes,
});// 全局前置守衛
router.beforeEach((to, from, next) => {const isAuthenticated = store.state.user.isAuthenticated; // 從Vuex中檢驗用戶認證狀態if (to.meta.requiresAuth && !isAuthenticated) {next({ name: 'login' }); // 未登錄，重定向到登錄頁} else {next(); // 繼續路由}
});// 全局后置守衛
router.afterEach((to, from) => {console.log('Navigated to:', to.name);
});export default router;

在這個示例中，beforeEach?用于檢查用戶是否已認證，如果目標路由需要認證但用戶未登錄，則重定向到登錄頁面。

3. 路由獨享守衛

路由獨享守衛是在特定路由配置中的?beforeEnter?函數。它僅在該路由被訪問時執行。

示例

javascript

const routes = [{path: '/protected',component: ProtectedView,beforeEnter: (to, from, next) => {const isAuthenticated = store.state.user.isAuthenticated;if (isAuthenticated) {next(); // 繼續訪問} else {next({ name: 'login' }); // 重定向到登錄}},},
];

在這個示例中，beforeEnter?檢查用戶是否認證，只有認證用戶才可以訪問?/protected?頁面。

4. 組件內守衛

組件內守衛是指在某個組件的主入口中定義的守衛，有三個主要鉤子函數：beforeRouteEnter、beforeRouteUpdate?和?beforeRouteLeave。

示例

javascript

export default {name: 'SomeComponent',beforeRouteEnter(to, from, next) {// 在路由進入前執行console.log('Entering SomeComponent');next();},beforeRouteUpdate(to, from, next) {// 在路由更新時執行console.log('Updating SomeComponent');next();},beforeRouteLeave(to, from, next) {// 在路由離開前執行const answer = window.confirm('Are you sure you want to leave this page?');if (answer) {next();} else {next(false); // 取消導航}},
};

在這個示例中，beforeRouteLeave?可以處理用戶在頁面離開之前的確認提示。

5. 動態路由守衛

動態路由守衛是在創建路由時定義的，用于在特定條件下運行的守衛。例如，根據用戶的角色權限決定用戶能訪問哪些路由。

示例

javascript

const routes = [{path: '/admin',component: AdminView,meta: { requiresAuth: true, roles: ['admin'] },beforeEnter: (to, from, next) => {const userRole = store.state.user.role;if (to.meta.roles.includes(userRole)) {next();} else {next({ name: 'forbidden' });}},},
];

這里通過?meta?和路由守衛來驗證用戶角色，只有具有?admin?角色的用戶能夠訪問該路由。

6. 使用實際示例理解路由守衛

下面是一個簡單的應用示例，它集成了全局守衛、路由獨享守衛和組件內守衛：

組件示例

vue

<template><div><h1>Welcome to My App</h1><router-link to="/protected">Go to Protected Page</router-link><router-link to="/admin">Go to Admin Page</router-link></div>
</template><script>
export default {name: 'Home',
};
</script>

路由配置示例

javascript

const routes = [{ path: '/', component: Home },{ path: '/protected', component: ProtectedView, meta: { requiresAuth: true } },{ path: '/admin', component: AdminView, meta: { requiresAuth: true, roles: ['admin'] } },{ path: '/login', component: Login },{ path: '/forbidden', component: Forbidden },
];const router = createRouter({history: createWebHistory(),routes,
});// 全局守衛
router.beforeEach((to, from, next) => {const isAuthenticated = store.state.user.isAuthenticated;if (to.meta.requiresAuth && !isAuthenticated) {next({ name: 'login' });} else {next();}
});

在這個例子中，用戶在未認證的情況下嘗試訪問受保護的頁面時，將被重定向到登錄頁面。

7. 總結與實踐

今天我們探討了路由守衛的相關知識，了解了全局守衛、路由獨享守衛和組件內守衛的具體用法。路由守衛的使用使得我們能夠在路由切換時執行自定義邏輯，從而實現更加復雜的訪問控制和數據處理邏輯。

練習

1. 在你的項目中實現一個需要登錄才能訪問的受保護頁面，并使用路由守衛來控制訪問。
2. 創建一個擁有角色權限的管理系統，使用動態路由守衛控制不同角色用戶的訪問權限。
3. 嘗試在組件內守衛中添加確認離開的邏輯，防止用戶在未保存的情況下離開頁面。

通過完成這些練習，你將對路由守衛的使用有更深入的理解。在接下來的學習中，我們將探索?Vue 的動畫?相關內容，敬請期待！