Vue.js 中的路由导航守卫是 Vue Router 提供的一套机制,用于在路由切换的过程中执行自定义代码逻辑,包括但不限于权限验证、页面滚动位置保存、加载数据等。它分为三种类型:
- 全局前置守卫 (Global beforeEach Guard)
全局前置守卫应用在整个应用程序的路由跳转之前,不论你访问任何路由都会触发。注册全局前置守卫通过调用 router.beforeEach 方法,并传入一个回调函数。这个回调函数接收三个参数:
to: Route: 即将要进入的目标路由对象。
from: Route: 当前导航正要离开的路由对象。
next: Function: 调用该函数进行下一步操作。它可以接受一个可选的参数(通常是一个错误对象),决定是否以及如何继续导航流程。
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
// 在这里可以执行异步操作,例如检查用户登录状态
if (!isAuthenticated) {
next('/login');
} else {
next();
}
});
- 全局解析守卫 (Global afterEach Guard)
除了前置守卫,Vue Router 还提供了全局后置守卫 (router.afterEach),这个守卫会在每次导航完成,即将激活组件渲染之后触发,但不涉及阻止或更改导航过程。
router.afterEach((to, from) => {
// 可以在这里记录路由历史、页面浏览统计等操作
});
- 路由独享守卫 (Per-Route Guard)
可以在单个路由配置中定义前置守卫和/或后置守卫,这些守卫仅针对特定路由生效:
{
path: '/admin',
component: AdminPanel,
beforeEnter: (to, from, next) => {
// 执行特定于 /admin 路由的权限检查或其他操作
if (canAccessAdmin()) {
next();
} else {
next({ name: 'access-denied' });
}
},
}
- 组件内的守卫 (In-Component Guards)
在单个路由组件内,有三种类型的守卫:
beforeRouteEnter: 组件实例还未创建时就已存在的守卫,不能直接访问组件实例,可以通过 next(vm => {}) 访问组件实例并传递给回调函数。
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.title = to.meta.title; // 设置组件标题
});
},
};
beforeRouteUpdate: 当路由的 params 或 query 发生变化(即当前路由路径不变,只有参数变化)时触发,此时可以直接访问组件实例。
export default {
beforeRouteUpdate(to, from, next) {
this.loadData(to.params.id); // 更新组件数据
next();
},
};
beforeRouteLeave: 导航离开当前路由时触发,可以用来确认是否允许离开。
export default {
data() {
return {
unsavedChanges: false,
};
},
methods: {
confirmNavigation() {
// 用户确认逻辑...
},
},
beforeRouteLeave(to, from, next) {
if (this.unsavedChanges) {
this.confirmNavigation().then(() => next()).catch(() => next(false));
} else {
next();
}
},
};