router.beforeEach和router.afterEach

router.beforeEach是什么？

router.beforeEach是一个全局守卫，用于在路由跳转前执行一些逻辑。它接收三个参数：to, from, 和 next。

1. to: 即将要进入的目标路由对象。
2. from: 当前导航正要离开的路由对象。
3. next: 一个函数，必须调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数

使用场景

• 权限验证: 检查用户是否有权限访问某个路由。
• 登录状态检查: 如果用户未登录，可以重定向到登录页面。
• 数据预加载: 在进入新页面前，可能需要从服务器获取一些数据。

  • 示例代码

  • 假设我们有一个需要用户登录才能访问的页面，我们可以这样设置路由守卫：

    router.beforeEach((to, from, next) => {
      // 检查目标路由是否需要认证
      if (to.matched.some(record => record.meta.requiresAuth)) {
        // 这里假设有一个函数isLoggedIn()来判断用户是否已登录
        if (!isLoggedIn()) {
          // 如果用户未登录，重定向到登录页面
          next({ path: '/login' });
        } else {
          // 如果已登录，继续导航
          next();
        }
      } else {
        // 如果目标路由不需要认证，直接继续导航
        next();
      }
    });

    在这个例子中，如果目标路由有requiresAuth元信息，并且用户未登录，则会被重定向到登录页面。如果用户已登录或目标路由不需要认证，则正常导航。        

router.afterEach 是什么？

router.afterEach 是一个全局后置守卫，用于在路由跳转完成后执行一些逻辑。它接收三个参数：to, from, 和 failure       

1. to: 即将要进入的目标路由对象。这个对象包含了目标路由的所有信息，如路径、组件等。
2. from: 当前导航正要离开的路由对象。这个对象包含了离开的路由的所有信息。
3. failure: 如果导航因为某种原因失败（例如，导航被取消或发生错误），这个参数会被设置为一个错误对象。如果导航成功，这个参数将是 undefined。

使用场景

1. 记录页面访问: 跟踪用户访问了哪些页面。
2. 修改页面标题: 根据不同的路由动态改变页面标题。
3. 处理导航失败: 当导航失败时执行某些操作，如显示错误消息或重试导航。

示例代码

假设我们正在使用 Vue 3 和 Vue Router 4，下面是如何设置一个简单的路由守卫来记录每次页面访问，并在导航失败时处理错误：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: Home },
        { path: '/about', component: About }
    ]
});

router.afterEach((to, from, failure) => {
    if (failure) {
        console.error('Navigation failed:', failure);
        // 这里可以添加更多错误处理逻辑，如显示错误消息等
    } else {
        console.log(`Navigated from ${from.path} to ${to.path}`);
        // 这里可以添加更多成功导航后的逻辑，如发送分析数据到服务器等
    }
});

export default router;

在这个例子中，每当路由发生变化时，都会在控制台输出从哪个路径跳转到了哪个路径。如果导航失败，则会输出错误信息。这对于调试和监控用户行为非常有用。