Vue.js如何配置路由守卫？-js教程-PHP中文网

Vue.js如何配置路由守卫？

月夜之吻

发布： 2025-06-30 17:06:02

原创

273人浏览过

vue.js路由守卫用于在路由跳转前后执行控制逻辑，如权限验证和页面统计。1. 全局前置守卫router.beforeeach在每次路由跳转前执行，可用于检查用户是否登录并决定是否允许访问目标路由；2. 全局解析守卫router.beforeresolve在组件内守卫和异步路由组件解析完成后调用，适合进行数据预取操作；3. 全局后置钩子router.aftereach在路由跳转完成后执行，通常用于页面访问统计；4. 组件内守卫包括beforerouteenter（进入组件前调用，无法访问this）、beforerouteupdate（组件复用时调用，可访问this）和beforerouteleave（离开组件时调用，可访问this），它们分别在不同场景下触发；处理异步路由守卫时需使用promise或async/await确保next()在异步操作完成后调用；为避免无限循环，应合理设计重定向条件，确保最终能跳出循环；组件内守卫的执行顺序依次是beforerouteleave、beforerouteupdate（若适用）、beforerouteenter，而全局守卫的顺序是beforeeach → beforerouteleave → beforeresolve → beforerouteupdate → beforerouteenter → aftereach。

Vue.js如何配置路由守卫？

Vue.js路由守卫主要用于在路由跳转前后进行一些控制，比如权限验证、页面访问统计等。它通过一系列钩子函数，让你可以在路由跳转的不同阶段执行自定义逻辑。

配置Vue.js路由守卫，主要围绕 router.beforeEach、router.beforeResolve 和 router.afterEach 这三个全局守卫，以及组件内的路由守卫（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）展开。

解决方案

立即学习“前端免费学习笔记（深入）”；

全局前置守卫 (router.beforeEach)

这是最常用的守卫，在每次路由跳转前执行。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About, meta: { requiresAuth: true } } // 需要权限的路由
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  // 假设你有一个验证用户是否登录的函数
  const isLoggedIn = () => {
    // 这里替换成你的实际验证逻辑，比如检查localStorage
    return localStorage.getItem('token') !== null;
  };

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这个路由需要登录才能访问
    if (!isLoggedIn()) {
      // 如果没有登录，重定向到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将要访问的页面路径传递给登录页面，方便登录后跳转
      });
    } else {
      next(); // 允许访问
    }
  } else {
    next(); // 确保一定要调用 next()
  }
});

export default router

登录后复制

这里，to 是目标路由对象，from 是当前路由对象，next 是一个函数，必须调用它来resolve这个钩子。next() 允许路由跳转，next(false) 中断当前导航，next('/login') 重定向到另一个路由。

注意 to.matched 用于检查目标路由是否匹配任何需要权限的路由记录。meta.requiresAuth 是你在路由配置中定义的自定义元数据，用于标记哪些路由需要登录。

全局解析守卫 (router.beforeResolve)

和 beforeEach 类似，区别是在所有组件内守卫和异步路由组件被解析之后，导航被确认之前调用。

router.beforeResolve((to, from, next) => {
  //  可以在这里进行一些数据预取操作，确保在组件渲染前数据准备就绪
  //  例如，从服务器获取一些全局配置
  next();
});

登录后复制

全局后置钩子 (router.afterEach)

在路由跳转完成后执行，没有 next 函数，所以不能改变导航。

router.afterEach((to, from) => {
  // 页面访问统计
  console.log(`Navigated to ${to.path} from ${from.path}`);
  // 可以调用第三方统计服务，例如 Google Analytics
});

登录后复制

组件内的路由守卫

这些守卫直接定义在组件内部，可以访问组件实例 (this)。
- beforeRouteEnter: 不能访问 this，因为在守卫执行前，组件实例还没有被创建。但是，你可以通过 next 的回调函数来访问组件实例。
```
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
    console.log('Component instance:', vm);
  })
}
```
  登录后复制
- beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用。可以访问组件实例 this。
```
beforeRouteUpdate (to, from, next) {
  // 例如，当路由参数改变时，重新获取数据
  this.getData(to.params.id);
  next();
}
```
  登录后复制
- beforeRouteLeave: 在离开当前路由时调用。可以访问组件实例 this。
```
beforeRouteLeave (to, from, next) {
  const answer = window.confirm('确定要离开此页面吗？')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
```
  登录后复制

如何处理异步路由守卫？

异步路由守卫是指在路由守卫中需要执行异步操作的情况，例如从服务器获取数据。处理异步路由守卫的关键在于正确使用 next 函数，并确保在异步操作完成后再调用 next。

router.beforeEach((to, from, next) => {
  // 模拟异步操作
  const fetchData = () => {
    return new Promise(resolve => {
      setTimeout(() => {
        const data = { authenticated: true }; // 假设从服务器获取的数据
        resolve(data);
      }, 500);
    });
  };

  fetchData().then(data => {
    if (to.meta.requiresAuth && !data.authenticated) {
      next('/login');
    } else {
      next();
    }
  });
});

登录后复制

这里，fetchData 函数模拟一个异步操作，例如从服务器获取用户认证信息。在 fetchData 的 then 回调中，我们根据获取到的数据判断用户是否已认证，并决定是否允许路由跳转。关键在于，next() 函数必须在 then 回调中调用，以确保在异步操作完成后再进行路由控制。

如何避免路由守卫中的无限循环？

路由守卫中的无限循环通常发生在重定向逻辑不当的情况下，例如在 beforeEach 守卫中，如果无论什么情况都重定向到同一个路由，就会导致无限循环。

避免无限循环的关键在于仔细设计重定向逻辑，确保重定向只在特定条件下发生，并且最终能够跳出循环。

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('token') !== null;

  if (to.path === '/login' && isLoggedIn) {
    // 如果用户已经登录，并且访问的是登录页面，则重定向到首页
    next('/');
  } else if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
    // 如果用户未登录，并且访问的是需要登录的页面，则重定向到登录页面
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    });
  } else {
    next();
  }
});

登录后复制

在这个例子中，我们添加了一个额外的判断条件：如果用户已经登录，并且访问的是登录页面，则重定向到首页。这样可以避免用户在已经登录的情况下，仍然被重定向到登录页面，从而导致无限循环。

组件内路由守卫的执行顺序是什么？

组件内路由守卫的执行顺序对于理解路由跳转的整个过程至关重要。