快捷導(dǎo)航

Vue3中導(dǎo)航守衛(wèi)的使用教程

更新時間：2023年08月23日 09:37:37 作者：一花一world

在Vue3中,導(dǎo)航守衛(wèi)（Navigation Guards）用于在路由切換前后執(zhí)行一些操作,例如驗證用戶權(quán)限、取消路由導(dǎo)航等,本文主要為大家介紹了vue3中導(dǎo)航守衛(wèi)的使用方法,需要的可以參考下

在Vue 3中，導(dǎo)航守衛(wèi)（Navigation Guards）用于在路由切換前后執(zhí)行一些操作，例如驗證用戶權(quán)限、取消路由導(dǎo)航等。Vue 3中的導(dǎo)航守衛(wèi)與Vue 2中的導(dǎo)航守衛(wèi)略有不同。下面是Vue 3中導(dǎo)航守衛(wèi)的使用方式：

全局前置守衛(wèi)（Global Before Guards）

beforeEach：在路由切換前執(zhí)行，可以用來進(jìn)行權(quán)限驗證或其他全局操作。

使用方法：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.beforeEach((to, from, next) => {
  // 執(zhí)行一些操作，例如權(quán)限驗證
  // 如果要繼續(xù)路由導(dǎo)航，調(diào)用next()；如果要取消導(dǎo)航，調(diào)用next(false)
  next();
});
export default router;

全局后置守衛(wèi)（Global After Guards）

afterEach：在路由切換后執(zhí)行，可以用來進(jìn)行一些全局操作，例如頁面統(tǒng)計。

使用方法：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.afterEach((to, from) => {
  // 執(zhí)行一些操作，例如頁面統(tǒng)計
});
export default router;

路由獨享守衛(wèi)（Per-Route Guards）

beforeEnter：在單個路由配置中定義，只對該路由生效。

使用方法：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/example',
      component: ExampleComponent,
      beforeEnter: (to, from, next) => {
        // 在進(jìn)入該路由前執(zhí)行一些操作
        next();
      }
    },
    // 其他路由配置...
  ]
});
export default router;

組件內(nèi)的守衛(wèi)（In-Component Guards）

beforeRouteEnter：在進(jìn)入路由前執(zhí)行，可以訪問組件實例。
beforeRouteUpdate：在當(dāng)前路由復(fù)用組件時執(zhí)行，例如從 /user/1 切換到 /user/2。
beforeRouteLeave：在離開當(dāng)前路由前執(zhí)行。

使用方法：

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在進(jìn)入路由前執(zhí)行一些操作
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在當(dāng)前路由復(fù)用組件時執(zhí)行一些操作
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在離開當(dāng)前路由前執(zhí)行一些操作
    next();
  },
  // 組件其他配置...
};

這些導(dǎo)航守衛(wèi)可以在Vue 3中的路由配置中使用，用于控制路由的導(dǎo)航行為和執(zhí)行一些額外的操作

實現(xiàn)登錄

1.創(chuàng)建一個用于存儲登錄狀態(tài)的全局變量，例如 isLoggedIn，并設(shè)置初始值為 false。

2.在全局前置守衛(wèi)中檢查登錄狀態(tài)，如果用戶未登錄且訪問的是需要登錄才能訪問的頁面，則取消導(dǎo)航并重定向到登錄頁面。

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.beforeEach((to, from, next) => {
  // 檢查登錄狀態(tài)
  if (to.meta.requiresAuth && !isLoggedIn.value) {
    next('/login'); // 重定向到登錄頁面
  } else {
    next(); // 繼續(xù)路由導(dǎo)航
  }
});
export default router;

3.在登錄頁面的組件內(nèi)，使用 beforeRouteEnter 守衛(wèi)來執(zhí)行登錄操作，并將登錄狀態(tài)設(shè)置為 true。

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在進(jìn)入路由前執(zhí)行登錄操作
    // 假設(shè)登錄成功后將登錄狀態(tài)設(shè)置為true
    isLoggedIn.value = true;
    next();
  },
  // 組件其他配置...
};

4.在其他需要登錄才能訪問的頁面的組件內(nèi)，使用 beforeRouteEnter 守衛(wèi)來檢查登錄狀態(tài)，如果用戶未登錄，則取消導(dǎo)航并重定向到登錄頁面。

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 檢查登錄狀態(tài)
    if (!isLoggedIn.value) {
      next('/login'); // 重定向到登錄頁面
    } else {
      next(); // 繼續(xù)路由導(dǎo)航
    }
  },
  // 組件其他配置...
};

通過以上步驟，您可以使用這四個守衛(wèi)方法來實現(xiàn)登錄功能。在全局前置守衛(wèi)中檢查登錄狀態(tài)，如果用戶未登錄且訪問的是需要登錄才能訪問的頁面，則取消導(dǎo)航并重定向到登錄頁面。在登錄頁面的組件內(nèi)，使用 beforeRouteEnter 守衛(wèi)來執(zhí)行登錄操作，并將登錄狀態(tài)設(shè)置為 true。在其他需要登錄才能訪問的頁面的組件內(nèi)，使用 beforeRouteEnter 守衛(wèi)來檢查登錄狀態(tài)，如果用戶未登錄，則取消導(dǎo)航并重定向到登錄頁面。

完整示例

下面是一個完整的實例代碼，演示如何使用守衛(wèi)來實現(xiàn)登錄功能：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/login',
      component: LoginComponent,
      meta: { requiresAuth: false } // 不需要登錄才能訪問
    },
    {
      path: '/dashboard',
      component: DashboardComponent,
      meta: { requiresAuth: true } // 需要登錄才能訪問
    },
    // 其他路由配置...
  ]
});
router.beforeEach((to, from, next) => {
  // 檢查登錄狀態(tài)
  if (to.meta.requiresAuth && !isLoggedIn.value) {
    next('/login'); // 重定向到登錄頁面
  } else {
    next(); // 繼續(xù)路由導(dǎo)航
  }
});
const app = createApp(App);
app.use(router);
app.mount('#app');

// LoginComponent.vue
import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在進(jìn)入路由前執(zhí)行登錄操作
    // 假設(shè)登錄成功后將登錄狀態(tài)設(shè)置為true
    isLoggedIn.value = true;
    next();
  },
  // 組件其他配置...
};

// DashboardComponent.vue
import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 檢查登錄狀態(tài)
    if (!isLoggedIn.value) {
      next('/login'); // 重定向到登錄頁面
    } else {
      next(); // 繼續(xù)路由導(dǎo)航
    }
  },
  // 組件其他配置...
};

這個示例中，我們創(chuàng)建了一個簡單的Vue應(yīng)用，并使用Vue Router來管理路由。在路由配置中，我們定義了兩個路由：/login和/dashboard。/login路由對應(yīng)的組件是LoginComponent，不需要登錄才能訪問，/dashboard路由對應(yīng)的組件是DashboardComponent，需要登錄才能訪問。

在全局前置守衛(wèi)中，我們檢查了路由的meta字段，如果requiresAuth為true且用戶未登錄，則重定向到登錄頁面。否則，繼續(xù)路由導(dǎo)航。

在LoginComponent組件的beforeRouteEnter守衛(wèi)中，我們模擬了登錄操作，并將登錄狀態(tài)設(shè)置為true。

在DashboardComponent組件的beforeRouteEnter守衛(wèi)中，我們檢查了登錄狀態(tài)，如果用戶未登錄，則重定向到登錄頁面。

這樣，我們就使用每個守衛(wèi)來實現(xiàn)了登錄功能

以上就是Vue3中導(dǎo)航守衛(wèi)的使用教程的詳細(xì)內(nèi)容，更多關(guān)于Vue3導(dǎo)航守衛(wèi)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: