vue3 router.afterEach实战用法
时间: 2024-09-06 16:03:06 浏览: 23
Vue3 Router的`afterEach`是一个全局守卫钩子,它会在每次路由跳转后被调用。这个钩子常用于执行一些路由跳转完成后的逻辑,比如记录路由信息、全局的路由权限验证、页面标题的更新等。
下面是一个简单的`afterEach`用法的示例:
```javascript
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// ...定义路由
]
});
// 使用afterEach钩子
router.afterEach((to, from) => {
// 在这里可以执行路由跳转后的逻辑
// 例如,可以更新文档标题
document.title = to.meta.title || '默认标题';
// 也可以进行一些权限验证,如果用户访问了没有权限的路由,可以重定向到登录页面
if (to.meta.requiresAuth && !isAuthenticated) {
// 如果需要认证而用户未认证,重定向到登录
return { name: 'login' };
}
});
export default router;
```
在这个例子中,我们首先创建了一个Vue Router实例。然后,我们使用`afterEach`方法添加了一个全局守卫。在这个守卫中,我们更新了文档的标题,这个标题是根据目标路由(`to`)的元信息(`meta`)中的`title`属性来设置的。如果`meta`中没有指定标题,则使用默认标题。此外,还进行了一种简单的权限验证,如果需要认证的路由而用户没有通过认证(`isAuthenticated`为假),则会被重定向到登录页面。