vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3导航守卫

Vue3中导航守卫的使用教程

作者：一花一world

在Vue3中,导航守卫（Navigation Guards）用于在路由切换前后执行一些操作,例如验证用户权限、取消路由导航等,本文主要为大家介绍了vue3中导航守卫的使用方法,需要的可以参考下

在Vue 3中，导航守卫（Navigation Guards）用于在路由切换前后执行一些操作，例如验证用户权限、取消路由导航等。Vue 3中的导航守卫与Vue 2中的导航守卫略有不同。下面是Vue 3中导航守卫的使用方式：

全局前置守卫（Global Before Guards）

beforeEach：在路由切换前执行，可以用来进行权限验证或其他全局操作。

使用方法：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.beforeEach((to, from, next) => {
  // 执行一些操作，例如权限验证
  // 如果要继续路由导航，调用next()；如果要取消导航，调用next(false)
  next();
});
export default router;

全局后置守卫（Global After Guards）

afterEach：在路由切换后执行，可以用来进行一些全局操作，例如页面统计。

使用方法：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.afterEach((to, from) => {
  // 执行一些操作，例如页面统计
});
export default router;

路由独享守卫（Per-Route Guards）

beforeEnter：在单个路由配置中定义，只对该路由生效。

使用方法：

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

组件内的守卫（In-Component Guards）

使用方法：

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行一些操作
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由复用组件时执行一些操作
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开当前路由前执行一些操作
    next();
  },
  // 组件其他配置...
};

这些导航守卫可以在Vue 3中的路由配置中使用，用于控制路由的导航行为和执行一些额外的操作

实现登录

1.创建一个用于存储登录状态的全局变量，例如 isLoggedIn，并设置初始值为 false。

2.在全局前置守卫中检查登录状态，如果用户未登录且访问的是需要登录才能访问的页面，则取消导航并重定向到登录页面。

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});
router.beforeEach((to, from, next) => {
  // 检查登录状态
  if (to.meta.requiresAuth && !isLoggedIn.value) {
    next('/login'); // 重定向到登录页面
  } else {
    next(); // 继续路由导航
  }
});
export default router;

3.在登录页面的组件内，使用 beforeRouteEnter 守卫来执行登录操作，并将登录状态设置为 true。

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行登录操作
    // 假设登录成功后将登录状态设置为true
    isLoggedIn.value = true;
    next();
  },
  // 组件其他配置...
};

4.在其他需要登录才能访问的页面的组件内，使用 beforeRouteEnter 守卫来检查登录状态，如果用户未登录，则取消导航并重定向到登录页面。

import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 检查登录状态
    if (!isLoggedIn.value) {
      next('/login'); // 重定向到登录页面
    } else {
      next(); // 继续路由导航
    }
  },
  // 组件其他配置...
};

通过以上步骤，您可以使用这四个守卫方法来实现登录功能。在全局前置守卫中检查登录状态，如果用户未登录且访问的是需要登录才能访问的页面，则取消导航并重定向到登录页面。在登录页面的组件内，使用 beforeRouteEnter 守卫来执行登录操作，并将登录状态设置为 true。在其他需要登录才能访问的页面的组件内，使用 beforeRouteEnter 守卫来检查登录状态，如果用户未登录，则取消导航并重定向到登录页面。

完整示例

下面是一个完整的实例代码，演示如何使用守卫来实现登录功能：

// 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) => {
  // 检查登录状态
  if (to.meta.requiresAuth && !isLoggedIn.value) {
    next('/login'); // 重定向到登录页面
  } else {
    next(); // 继续路由导航
  }
});
const app = createApp(App);
app.use(router);
app.mount('#app');
// LoginComponent.vue
import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由前执行登录操作
    // 假设登录成功后将登录状态设置为true
    isLoggedIn.value = true;
    next();
  },
  // 组件其他配置...
};
// DashboardComponent.vue
import { ref } from 'vue';
export default {
  beforeRouteEnter(to, from, next) {
    // 检查登录状态
    if (!isLoggedIn.value) {
      next('/login'); // 重定向到登录页面
    } else {
      next(); // 继续路由导航
    }
  },
  // 组件其他配置...
};

这个示例中，我们创建了一个简单的Vue应用，并使用Vue Router来管理路由。在路由配置中，我们定义了两个路由：/login和/dashboard。/login路由对应的组件是LoginComponent，不需要登录才能访问，/dashboard路由对应的组件是DashboardComponent，需要登录才能访问。

在全局前置守卫中，我们检查了路由的meta字段，如果requiresAuth为true且用户未登录，则重定向到登录页面。否则，继续路由导航。

在LoginComponent组件的beforeRouteEnter守卫中，我们模拟了登录操作，并将登录状态设置为true。

在DashboardComponent组件的beforeRouteEnter守卫中，我们检查了登录状态，如果用户未登录，则重定向到登录页面。

这样，我们就使用每个守卫来实现了登录功能

以上就是Vue3中导航守卫的使用教程的详细内容，更多关于Vue3导航守卫的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文