router.beforeEach
是 Vue Router 提供的全局前置守卫,用于在路由切换之前执行一些逻辑。该守卫接收三个参数:
- to: 即将要进入的目标路由对象。
- from: 当前导航正要离开的路由。
- next : 一个函数,用于 resolve 钩子。调用
next
表示路由可以继续执行。
基本用法如下:
javascript
router.beforeEach((to, from, next) => {
// 在路由切换之前执行的逻辑
// ...
// 调用 next() 表示路由可以继续执行
next();
});
在 beforeEach
钩子中,可以进行一些权限判断、重定向、取消导航等操作。以下是一些常见的用法:
1. 权限判断:
javascript
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
// 跳转到登录页
next('/login');
} else {
// 继续执行下一个钩子
next();
}
});
2. 重定向:
javascript
router.beforeEach((to, from, next) => {
if (to.path === '/old-path') {
// 重定向到新路径
next('/new-path');
} else {
next();
}
});
3. 取消导航:
javascript
router.beforeEach((to, from, next) => {
if (shouldCancelNavigation()) {
// 取消当前导航
next(false);
} else {
next();
}
});
4. 异步处理:
javascript
router.beforeEach(async (to, from, next) => {
// 异步操作,如请求用户信息
const user = await fetchUserInfo();
if (user) {
// 用户信息存在,继续导航
next();
} else {
// 用户信息不存在,取消导航或重定向
next('/login');
}
});
这些只是 beforeEach
的基本用法,你可以根据实际需求进行更复杂的操作。注意,在 beforeEach
钩子中需要调用 next
来继续执行后续钩子,否则路由会被中断。