[教程]Vue3 Vue Router：路由守卫全攻略，轻松掌握权限控制与页面跳转技巧

路由守卫概述Vue Router 是 Vue.js 的官方路由管理器，它允许开发者定义路由和页面之间的跳转关系。在单页面应用（SPA）中，路由守卫是实现权限控制和页面跳转的关键机制。路由守卫可以在全局...

路由守卫概述

Vue Router 是 Vue.js 的官方路由管理器，它允许开发者定义路由和页面之间的跳转关系。在单页面应用（SPA）中，路由守卫是实现权限控制和页面跳转的关键机制。路由守卫可以在全局范围内应用，也可以针对特定路由或组件内部应用。通过使用路由守卫，我们可以实现以下功能：

• 权限验证
• 数据预取
• 页面跳转控制
• 页面标题更新

全局守卫

全局守卫是最常用的路由守卫之一，它可以在所有路由跳转前后执行。Vue Router 提供了以下全局守卫：

全局前置守卫 (beforeEach)

在路由跳转之前执行，在导航开始时最早被调用，通常用于权限验证或登录判断。

router.beforeEach((to, from, next) => { // 执行权限验证等操作 console.log('全局前置守卫'); next();
});

全局解析守卫 (beforeResolve)

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

router.beforeResolve((to, from, next) => { // 执行某些操作 console.log('全局解析守卫'); next();
});

全局后置守卫 (afterEach)

在路由跳转后执行，常用于页面加载完成后的操作，比如页面标题的更新。

router.afterEach((to, from) => { // 执行某些操作 console.log('全局后置守卫');
});

路由独享守卫

路由独享守卫是应用在特定路由上的守卫，它可以在配置路由时使用。

{ path: '/admin', component: Admin, beforeEnter: (to, from, next) => { // 逻辑判断 if (auth.isAdmin()) { // 如果用户是管理员，允许访问 next(); } else { // 否则跳转到权限不足页面 next('/403'); } }
}

组件内守卫

组件内的守卫可以在路由组件内直接定义，包括：

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

export default { beforeRouteEnter(to, from, next) { // 在进这个路由的守卫方法的时候 当前组件还没有被实例化 // 如果要访问当前组件的实例 可以在next里面写一个回调函数 获取到实例 next(vm => { // 通过 vm 访问组件实例 }); }, beforeRouteUpdate(to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例 watch($route) 或监听事件等 next(); }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 next(); }
};

权限控制与页面跳转

通过以上路由守卫，我们可以轻松实现权限控制和页面跳转。以下是一个简单的示例：

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!auth.isLoggedIn()) { next('/login'); } else { next(); } } else { next(); }
});

在这个例子中，如果目标路由需要认证（requiresAuth），并且用户未登录，则会重定向到登录页面。

总结

Vue Router 的路由守卫是一种强大的机制，可以帮助开发者实现权限控制和页面跳转。通过理解并合理使用全局守卫、路由独享守卫和组件内守卫，可以有效地提升应用的安全性和用户体验。