深入理解 Vue Router 源码中导航守卫中 `next()` 参数的不同用法在源码中的处理逻辑。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位掘金的朋友们，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue Router 源码中 next() 这个磨人的小妖精，特别是它在导航守卫中各种花式用法背后的逻辑。保证让大家听完之后，以后再看到 next()，心里不会慌，手也不会抖！

开场白：next()，路由导航的钥匙，但用不好容易翻车

大家用 Vue Router，导航守卫那是家常便饭。beforeEach、beforeResolve、afterEach，一套组合拳下来，页面跳转那是安排得明明白白。但要说这里面最关键，也是最容易让人懵圈的，我觉得非 next() 莫属。

next() 就像一把钥匙，决定了你的路由能不能继续前进。但它可不是一把简单的钥匙，它有很多不同的用法，用不好就容易翻车，要么页面卡死，要么无限循环，想想都头大。

今天，咱们就来扒一扒 Vue Router 源码，看看 next() 这把钥匙，到底是怎么工作的，以及它各种用法背后，源码是怎么处理的。

第一部分：next() 的基本用法回顾：打开路由之门

首先，咱们先来回顾一下 next() 的几种基本用法，这是咱们后续深入理解的基础。

next()：放行，一路绿灯

这是最简单的用法，直接调用 next()，表示允许路由继续前进，没有任何附加条件。
```
router.beforeEach((to, from, next) => {
  // 权限校验之类的逻辑...
  next(); // 允许路由继续前进
});
```
源码里，这种情况相当于告诉 Router，你随意，我没意见，直接进入下一个钩子或者组件渲染阶段。
next(false)：拦截，此路不通

next(false) 表示拦截当前路由，阻止导航。页面会停留在 from 对应的页面。
```
router.beforeEach((to, from, next) => {
  if (!isAuthenticated) {
    next(false); // 拦截路由，不让它过去
  } else {
    next();
  }
});
```
源码里，Router 收到 false，会直接取消当前导航，并触发 NavigationCancelled 错误。
next(path) 或 next({ path: 'xxx' })：重定向，换个地方走

next(path) 和 next({ path: 'xxx' }) 表示重定向到指定的路径。注意，这里 path 可以是字符串，也可以是包含 path 的对象。
```
router.beforeEach((to, from, next) => {
  if (to.path === '/old-path') {
    next('/new-path'); // 重定向到 /new-path
  } else {
    next();
  }
});
```
源码里，Router 收到路径信息，会创建一个新的 Location 对象，然后用新的 Location 对象替换当前的 Location 对象，重新开始导航流程。
next(error)：中断，抛出异常

next(error) 表示中断导航，并抛出一个错误。这通常用于处理一些异常情况。
```
router.beforeEach((to, from, next) => {
  try {
    // 一些可能会出错的操作...
    next();
  } catch (error) {
    next(error); // 抛出错误，中断导航
  }
});
```
源码里，Router 收到 Error 对象，会触发 NavigationAborted 错误，并把 Error 对象传递给全局的错误处理函数。

第二部分：next() 在源码中的处理逻辑：一层层抽丝剥茧

理解了 next() 的基本用法，咱们就来深入源码，看看 Router 内部是怎么处理这些不同情况的。

首先，我们需要知道，Vue Router 的导航流程是一个 pipeline，由一系列的导航守卫组成。Router 会依次执行这些守卫，每个守卫都会调用 next() 来决定下一步的操作。

下面是一个简化的 Router 导航流程：

开始导航 -> 执行 beforeRouteEnter 钩子 -> 执行 beforeRouteUpdate 钩子 -> 执行 beforeRouteLeave 钩子 -> 执行 beforeEach 全局守卫 -> 执行 路由独享的 beforeEnter 守卫 -> 执行 组件内的 beforeRouteEnter 守卫 -> 解析异步路由组件 -> 执行 beforeResolve 全局守卫 -> 激活组件 -> 执行 afterEach 全局守卫 -> 结束导航

在每个导航守卫中，next() 函数实际上是由 Router 内部的 iterator 函数提供的。iterator 函数会接收 next() 的参数，并根据参数的不同，执行不同的操作。

下面是 iterator 函数简化后的代码：

function iterator(hook, next) {
  return (to, from, next, ...args) => {
    const nextCalled = false;
    const nextHook = (params) => {
      if (nextCalled) {
        warn('next() should be called only once in a guard.');
        return;
      }
      nextCalled = true;

      if (params === undefined) {
        // next()：放行
        next();
      } else if (params === false) {
        // next(false)：拦截
        next(createNavigationCancellationError(to, from));
      } else if (typeof params === 'string' || (typeof params === 'object' && params !== null && typeof params.path === 'string')) {
        // next(path) 或 next({ path: 'xxx' })：重定向
        next(createRouterError(START, to, from, {
          type: NavigationFailureType.redirected,
          redirectedFrom: from.fullPath,
          to: params,
        }));
      } else if (params instanceof Error) {
        // next(error)：中断
        next(createRouterError(START, to, from, {
          type: NavigationFailureType.aborted,
          message: params.message,
        }));
      } else {
        // 其他情况：参数无效
        next(createRouterError(START, to, from, {
          type: NavigationFailureType.aborted,
          message: `Invalid argument passed to next(): ${params}`,
        }));
      }
    };

    try {
      // 执行导航守卫
      Promise.resolve(hook.call(null, to, from, nextHook, ...args)).then(() => {
        if (!nextCalled) {
          nextHook(); // 自动调用 next()
        }
      });
    } catch (error) {
      next(error); // 捕获异常，中断导航
    }
  };
}

从上面的代码可以看出，iterator 函数主要做了以下几件事：

防止 next() 被多次调用：nextCalled 变量用于标记 next() 是否已经被调用过，如果被调用过，再次调用会发出警告。
处理 next() 的不同参数：根据 params 的类型，执行不同的操作，包括放行、拦截、重定向和中断。
执行导航守卫：调用 hook.call() 执行导航守卫函数，并传入 to、from 和 nextHook 等参数。
自动调用 next()：如果导航守卫函数没有手动调用 next()，iterator 函数会自动调用 next()，以确保导航流程能够继续进行。
捕获异常：如果导航守卫函数抛出异常，iterator 函数会捕获异常，并调用 next(error) 中断导航。

第三部分：next() 的高级用法：更灵活的路由控制

除了基本用法，next() 还有一些更高级的用法，可以实现更灵活的路由控制。

next(vm => { ... })：访问组件实例

在 beforeRouteEnter 守卫中，由于组件还没有被创建，this 无法访问组件实例。但是，可以通过 next() 的回调函数来访问组件实例。
```
beforeRouteEnter(to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
    console.log('组件实例：', vm);
  });
}
```
源码里，Router 会把组件实例作为参数传递给 next() 的回调函数。
next({ ...location, replace: true })：替换历史记录

默认情况下，使用 next(path) 或 next({ path: 'xxx' }) 进行重定向时，会在历史记录中添加一个新的条目。但是，可以通过设置 replace: true 来替换历史记录，防止用户通过后退按钮回到之前的页面。
```
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next({ path: '/home', replace: true }); // 重定向到 /home，并替换历史记录
  } else {
    next();
  }
});
```
源码里，Router 会根据 replace 属性的值，决定是使用 history.pushState() 还是 history.replaceState() 来更新历史记录。
利用 next() 实现路由懒加载

结合 Vue 的异步组件和 next()，可以实现路由懒加载，提高应用的性能。
```
const Home = () => import('./components/Home.vue');

const routes = [
  {
    path: '/home',
    component: Home,
    beforeEnter: (to, from, next) => {
      Home().then(() => {
        next();
      }).catch(error => {
        next(error);
      });
    }
  }
];
```
这里我们使用了 beforeEnter 守卫，在进入 /home 路由之前，先异步加载 Home 组件。加载成功后，调用 next() 放行；加载失败后，调用 next(error) 中断导航。

第四部分：next() 使用注意事项：避免踩坑

虽然 next() 功能强大，但是使用不当很容易踩坑。下面是一些使用 next() 的注意事项：

确保 next() 只被调用一次：在同一个导航守卫中，next() 只能被调用一次。如果多次调用，Router 会发出警告，并忽略后续的调用。
避免无限循环重定向：在使用 next(path) 或 next({ path: 'xxx' }) 进行重定向时，要避免无限循环重定向。例如，不要在 / 路由中重定向到 / 路由。
处理异步操作：如果导航守卫中包含异步操作，要确保在异步操作完成后再调用 next()。可以使用 Promise 或 async/await 来处理异步操作。
处理错误：如果导航守卫中可能会出现错误，要使用 try/catch 语句捕获错误，并调用 next(error) 中断导航。
理解 beforeRouteEnter 钩子的特殊性：beforeRouteEnter 不能访问 this，只能通过 next(callback) 的方式访问组件实例。

第五部分：总结：掌握 next()，掌控你的路由

好了，今天咱们就聊到这里。相信大家对 Vue Router 源码中 next() 的用法和处理逻辑有了更深入的理解。

记住，next() 是路由导航的钥匙，但它不是一把简单的钥匙。它有很多不同的用法，需要根据不同的场景选择合适的用法。只有掌握了 next()，才能真正掌控你的路由，让你的应用更加健壮和灵活。

最后，希望大家在以后的开发中，能够灵活运用 next()，写出高质量的 Vue 应用。感谢大家的聆听！下次再见！

发表回复 取消回复

发表回复取消回复