vue-router的路由守衛是什么

Vue Router 的路由守衛是什么

在 Vue.js 中，Vue Router 是一個用于構建單頁面應用（SPA）的路由管理器。它允許開發者定義路由映射，并在用戶導航到不同頁面時動態加載相應的組件。為了在路由切換時執行一些邏輯操作，Vue Router 提供了路由守衛（Route Guards）功能。路由守衛允許開發者在路由導航過程中插入自定義邏輯，例如權限驗證、數據預加載、頁面跳轉前的確認等。

路由守衛的類型

Vue Router 提供了多種類型的路由守衛，它們分別在路由導航的不同階段執行。以下是常見的路由守衛類型：

1. 全局前置守衛（Global Before Guards）

   • beforeEach: 在路由導航開始之前執行。通常用于全局的權限驗證或頁面跳轉前的確認。
   • beforeResolve: 在導航被確認之前執行，且在組件內守衛和異步路由組件被解析之后。

2. 全局后置鉤子（Global After Hooks）

   • afterEach: 在路由導航完成后執行。通常用于日志記錄或頁面加載后的操作。

3. 路由獨享的守衛（Per-Route Guards）

   • beforeEnter: 在進入特定路由之前執行?？梢杂糜谔囟酚傻臋嘞掾炞C或數據預加載。

4. 組件內的守衛（In-Component Guards）

   • beforeRouteEnter: 在路由進入組件之前執行。此時組件實例尚未創建，因此無法訪問 this。
   • beforeRouteUpdate: 在當前路由改變，但該組件被復用時執行。例如，在 /user/:id 路由中，當 id 發生變化時，組件會被復用。
   • beforeRouteLeave: 在離開當前路由之前執行。通常用于提示用戶保存未保存的更改或確認離開。

路由守衛的使用場景

1. 權限驗證 在用戶訪問某些需要權限的頁面時，可以通過 beforeEach 或 beforeEnter 守衛來檢查用戶是否具有訪問權限。如果沒有權限，可以重定向到登錄頁面或其他頁面。

2. 數據預加載 在進入某個路由之前，可能需要預先加載一些數據?？梢栽?beforeRouteEnter 或 beforeEnter 守衛中發起異步請求，并在數據加載完成后再進入路由。

3. 頁面跳轉前的確認 當用戶在表單頁面輸入了數據但未保存時，可以通過 beforeRouteLeave 守衛提示用戶是否確認離開當前頁面。

4. 日志記錄 在 afterEach 守衛中可以記錄用戶的導航行為，用于分析用戶行為或調試。

示例代碼

以下是一個簡單的示例，展示了如何使用不同類型的路由守衛：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Admin from './components/Admin.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 檢查用戶權限
        const isAdmin = checkUserRole();
        if (isAdmin) {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
});

// 全局前置守衛
router.beforeEach((to, from, next) => {
  console.log(`Navigating from ${from.path} to ${to.path}`);
  next();
});

// 全局后置鉤子
router.afterEach((to, from) => {
  console.log(`Navigation to ${to.path} completed`);
});

// 組件內守衛
const AdminComponent = {
  template: '<div>Admin Page</div>',
  beforeRouteEnter(to, from, next) {
    // 組件實例尚未創建，無法訪問 this
    next(vm => {
      // 通過 `vm` 訪問組件實例
      console.log('Admin component is about to be rendered');
    });
  },
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Do you really want to leave?');
    if (answer) {
      next();
    } else {
      next(false);
    }
  }
};

export default router;

總結

Vue Router 的路由守衛為開發者提供了在路由導航過程中執行自定義邏輯的能力。通過合理使用路由守衛，可以實現權限驗證、數據預加載、頁面跳轉前的確認等功能，從而提升應用的用戶體驗和安全性。掌握路由守衛的使用是開發復雜 Vue.js 應用的重要技能之一。